javascript - React useEffect hook 中的 Fetch API 没有响应

Question

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

这是我的代码。

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;

这是我的输出

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

标签： javascriptreactjsreact-hooks

Answer 1

问题是您试图在更新状态之前获取 eventData 的值，将 console.log(eventData) 移到 useEffect 之外，就像这样

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) //Here

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