React useEffect 钩子中的 Fetch API 没有响应 [英] No response from Fetch API in React useEffect hook

问题描述

我正在尝试使用 React useEffect 钩子中的 fetch API 来发出 get 请求，但我无法按预期打印我的响应.我只得到一个空数组作为响应.

这是我的代码.

function App() {const [eventData,setEventData] = useState([]);const [loading,setLoading] = useState(false);useEffect(()=>{const fetchData = async()=>{设置加载(真)；const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');const {events} = await res.json();设置事件数据(事件)；设置加载(假)；}fetchData();控制台日志(事件数据)},[])返回 (<div>{{!加载?<Map eventData={eventData}/>:<加载器/>}}

);}导出默认应用程序；

这是我的输出

但是如果在 useEffect 钩子之后写 console.log 语句，我会得到预期的输出.我不明白为什么它会这样.如果有人能解释原因，将不胜感激.提前致谢.

解决方案

setState 是异步的，因此您无法在设置新值的函数中看到更新的值，您在console.log(eventData)，你需要做 console.log(events) 看看你从响应中得到了什么

顺便说一句，我建议您默认将加载设置为 true，因为您在组件挂载时执行您的请求 const [loading,setLoading] = useState(true);，然后您可以去掉函数中的setLoading(true);

function App() {const [eventData,setEventData] = useState([]);const [loading,setLoading] = useState(true);useEffect(()=>{const fetchData = async()=>{const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');const {events} = await res.json();控制台日志(事件)设置事件数据(事件)；设置加载(假)；}fetchData();},[])返回 (<div>{！加载?<Map eventData={eventData}/>:<加载器/>}

);}导出默认应用程序；

I am trying to use the fetch API in React useEffect hook to make a get request but I am not able to Print my response as expected. I am only getting an empty array as the response.

This is my code.

function App() {
  const [eventData,setEventData] = useState([]);
  const [loading,setLoading] = useState(false);

  useEffect(()=>{
    const fetchData = async()=>{
      setLoading(true);
      const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');
      const {events} = await res.json();
      setEventData(events);
      setLoading(false);
    }

    fetchData();
    console.log(eventData)
  },[])
return (
    <div> 
      {{!loading ? <Map eventData={eventData}/> : <Loader/>}}
    </div>
  );
}
  
export default App;

this is my output

But if write the console.log statement after the useEffect hook I am getting the expected output. I don't understand why it's behaving in this way. It would be much appreciated if someone can explain the reason for this. Thanks in Advance.

解决方案

setState is asynchronous so you can't see the updated value in the function where you set a new value, where you console.log(eventData), you need to do console.log(events) to see what you get from the response

And, by the way, I recommend you to set loading at true by default because you do your request when the component mounts const [loading,setLoading] = useState(true);, then you can remove the setLoading(true); in the function

function App() {
  const [eventData,setEventData] = useState([]);
  const [loading,setLoading] = useState(true);

  useEffect(()=>{
    const fetchData = async()=>{
      const res = await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events');
      const {events} = await res.json();
    console.log(events)
      setEventData(events);
      setLoading(false);
    }

    fetchData();
  },[])
return (
    <div> 
      {!loading ? <Map eventData={eventData}/> : <Loader/>}
    </div>
  );
}
  
export default App;

这篇关于React useEffect 钩子中的 Fetch API 没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！