javascript - 在 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()方法仅适用于 Arrays[]而不适用于 Objects {}，因此当第一次安装/初始化组件时，map 方法是针对对象执行的，从而引发map is not a function错误。