在 React hooks 状态下循环遍历 json 数据

Question

我想在地图中显示我所在州的数据我设法获得了我所在州的纬度和经度问题是每当尝试通过该州进行地图绘制时我总是得到它不是函数错误这是我的部分我在该州拥有的代码和数据：

const [countriesData, setCountriesData] = useState({});
useEffect(() => {
const fetchAPI = async () => {
  setCountriesData(await fetchDataCountries());
};
fetchAPI();
}, [setCountriesData]);

console.log(countriesData);

并像这样映射它：

 {countriesData.map((data)=>(
     <Marker latitude={data.countriesData.latitude}
     longitude={data.countriesData.longitude}/>
     ))}

获取api函数：

export const fetchDataCountries = async () => {
  try {
    const data = await axios.get(url);
    const newData = data.data;
    const modfiedData = newData.map((countryData) => {
      return countryData.coordinates;
    });
    return modfiedData;
  } catch (error) {
    console.log(error);
  }
};

Answer 1

要使您的map 工作，您需要将您的state 转换为数组，现在它是一个对象。

之后，它可能看起来像这样：

{countriesData.map((country) => (
  <Marker
    latitude={country.latitude}
    longitude={country.longitude}
  />
))}

或

{countriesData.map(({ latitude, longitude }) => (
  <Marker
    latitude={latitude}
    longitude={longitude}
  />
))}

但要获得更准确的答案，最好有一个 state 内容的示例。

Answer 2

您正在使用空对象初始化 countriesData，然后您正在获取 API 数据。

假设响应是这样的对象数组：

[
   { latitude: 38.8451, longitude: -37.0294 }
   { ... // other coordinates }
]

将初始状态更改为空数组，如下所示：

const [countriesData, setCountriesData] = useState([]);

另外，更新这个块：

{countriesData.map((data) => <Marker latitude={data.latitude} longitude={data.longitude} />)}

---

说明：map()方法只对数组[]有效，对对象{}无效，因此当组件第一次挂载/初始化时，map方法被执行反对一个对象，从而引发map is not a function 错误。