Javascript 如何仅从获取的json数据返回设置状态？

我用它来获取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);

我得到以下控制台日志：

null
Array(17)

---

因此，我的函数FetchEarthquakeData返回空变量，然后返回！所需的api。但是，如果我想在jsonData上映射（），则会映射空值。我如何重构代码以便只获得数组？

我不太确定

useState（）

和

setData（）

做什么。但是为了从API中获取json数据，您可以按照下面的方式创建函数，然后可以对获取的数据执行操作

consturl=”https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson"
const FetchEarthquakeData=url=>{
返回新承诺（解决=>{
获取（url）
.then（res=>res.json（））
.then（jsonData=>resolve（jsonData.features））
})
}
获取地震数据（url）。然后（功能=>{
console.log（特性）
//在这里绘制地图（）
})

我不太清楚

useState（）

和

setData（）

做什么。但是为了从API中获取json数据，您可以按照下面的方式创建函数，然后可以对获取的数据执行操作

consturl=”https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_day.geojson"
const FetchEarthquakeData=url=>{
返回新承诺（解决=>{
获取（url）
.then（res=>res.json（））
.then（jsonData=>resolve（jsonData.features））
})
}
获取地震数据（url）。然后（功能=>{
console.log（特性）
//在这里绘制地图（）
})

根据react钩子的文档，只有react函数的调用钩子不会调用常规JavaScript函数的钩子。 React函数组件——基本上只是返回JSX（React的语法）的React组件的JavaScript函数 对于您的需求，您可以在react组件中执行以下操作。 想法是让状态钩子用空数组初始化，然后在json数据可用时更新它。获取逻辑可以在useeffect中移动

const SampleComponent=()=>{
const [data,setData] = useState([])
useeffect (){
fetch(url).then((responsedata)=>setData(responseData) ,err=>console.log (err)
}

return (
<>
{
data.map((value,index)=>
<div key=index>{value}<div>
}
</>
)
}

在React组件中，可以使用

const {data,error} = useFetch(url , options)

---

根据react钩子的文档，只有react函数的调用钩子不调用常规JavaScript函数的钩子。 React函数组件——基本上只是返回JSX（React的语法）的React组件的JavaScript函数 对于您的需求，您可以在react组件中执行以下操作。 想法是让状态钩子用空数组初始化，然后在json数据可用时更新它。获取逻辑可以在useeffect中移动

const SampleComponent=()=>{
const [data,setData] = useState([])
useeffect (){
fetch(url).then((responsedata)=>setData(responseData) ,err=>console.log (err)
}

return (
<>
{
data.map((value,index)=>
<div key=index>{value}<div>
}
</>
)
}

在React组件中，可以使用

const {data,error} = useFetch(url , options)

---

你必须以异步的方式来实现你所需要的。 我建议你分开做。以防在安装组件时需要加载数据

另一件事是你的函数有点混乱。 让我们假设一些事情：

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(url);

      setData(result.features);
    };

    fetchData();
  }, []);

  return (
    <div>
      {console.log(data)}
      {data && <p>{JSON.stringify(data, null, 2)}</p>}
    </div>
  );
};

---

你必须以异步的方式来实现你所需要的。 我建议你分开做。以防在安装组件时需要加载数据

另一件事是你的函数有点混乱。 让我们假设一些事情：

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

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(url);

      setData(result.features);
    };

    fetchData();
  }, []);

  return (
    <div>
      {console.log(data)}
      {data && <p>{JSON.stringify(data, null, 2)}</p>}
    </div>
  );
};

---

您以错误的方式使用setState。这里根本不需要状态，只需使函数异步并等待responseState被设计用于组件内部，在每个渲染之间需要维护状态。此函数的任务是获取数据，因此不需要在函数调用之间维护状态。您应该将结果存储在您的组件中，而不是此函数中，或者您可以创建一个钩子并将状态存储在其中..您使用setState的方式错误。这里根本不需要状态，只需使函数异步并等待responseState被设计用于组件内部，在每个渲染之间需要维护状态。此函数的任务是获取数据，因此不需要在函数调用之间维护状态。您应该将结果存储在组件中，而不是此函数中，或者您可以创建一个钩子并将状态存储在其中。。