javascript - 如何从获取的 json 数据中仅返回 set-State？

Question

我正在使用这个Api来获取json数据。

const FetchEarthquakeData = url => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(jsonData => setData(jsonData.features))
  }, [url]);

  return data;
};

问题是当我像这样使用这个函数时:

const jsonData = FetchEarthquakeData(url)
console.log(jsonData);

我得到以下console.logs:

null
Array(17)

所以我的函数 FetchEarthquakeData 返回 null 变量!所需的 API。但是，如果我想对 jsonData 进行 map() ，则会映射 null 值。如何重构我的代码以便只获得数组？

Answer 1

我不太确定 useState() 和 setData() 的作用。但是为了从API中获取json数据，您可以编写如下函数，然后就可以对获取的数据进行操作。

const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson"

const FetchEarthquakeData = url => {
  return new Promise(resolve => {
    fetch(url)
      .then(res => res.json())
      .then(jsonData => resolve(jsonData.features))
  })
}

FetchEarthquakeData(url).then(features => {
  console.log(features)
  // Do your map() here
})