React函数式组件中如何将数组location属性传入setState并展示值

假设你的源数据结构类似这样（对应你提到的附图结构）：

const sourceData = [
  {
    id: 1,
    location: {
      lat: 40.7128,
      lng: -74.0060,
      address: "New York"
    }
    // 其他属性...
  },
  // 更多数组元素...
];

下面是完整的实现示例：

import { useState, useEffect } from 'react';

function LocationViewer() {
  // 用state存储提取后的location数组
  const [locations, setLocations] = useState([]);

  // 模拟数据获取（实际场景可能是API请求）
  useEffect(() => {
    // 替换成你的实际数据源
    const fetchedData = [
      { id: 1, location: { lat: 40.7128, lng: -74.0060, address: "纽约" } },
      { id: 2, location: { lat: 34.0522, lng: -118.2437, address: "洛杉矶" } }
    ];

    // 提取每个元素的location属性，生成新数组
    const extractedLocations = fetchedData.map(item => item.location);
    // 更新state
    setLocations(extractedLocations);
  }, []);

  return (
    <div>
      <h3>地点信息</h3>
      {/* 判断数组是否有内容，避免空数组渲染问题 */}
      {locations.length === 0 ? (
        <p>暂无地点数据</p>
      ) : (
        locations.map((loc, idx) => (
          <div key={idx} style={{ border: '1px solid #eee', padding: '10px', margin: '10px 0' }}>
            <p>纬度: {loc.lat}</p>
            <p>经度: {loc.lng}</p>
            <p>地址: {loc.address}</p>
          </div>
        ))
      )}
    </div>
  );
}

export default LocationViewer;

核心要点 #

• 用Array.map()遍历源数组，直接提取每个元素的location属性，得到只包含location对象的数组，再传入setLocations更新状态。
• 渲染时加空数组判断，防止数据未加载完成时出现空白或报错。
• 列表渲染必须加key属性，这里用idx（索引）是简单场景，如果你的源数据有唯一标识（比如id），最好用item.id作为key，性能更优。

内容的提问来源于stack exchange，提问作者Chamaka Mendis