javascript - 在 React 中运行 useEffect 后，状态数组未更新

Question

我对 React.js 非常陌生。我正在尝试更改处于使用钩子(Hook)状态的变量recepies。下面是我的代码片段:

import React, { useState, useEffect } from 'react';
import './App.css';

function App() {

const [recepies, setRecepies] = useState([]);

useEffect(()=>{getRecepies()}, []);

//const example = Some valid API URL


  const getRecepies = async () =>{
    const response = await fetch(example);
    const data = await response.json();

    //data.hits is an array of 10 objects
     setRecepies(data.hits);

     console.log(recepies);
    // prints nothing

  }

  return (  
    <div className="App">
    </div>
  );
}

export default App;

问题是 setRecepies 没有更新 recepies 状态。这是为什么？data.hits 是一个有效的数组，其中包含我使用 API 获取的 10 个对象。

Answer 1

recepies 是本地const。它永远不会改变，这也不是 setRecepies 想要做的。将日志语句放在您放置的位置只能注销 recepies 等于创建 getRecepies 时的内容。

setRecepies 的目的是告诉 React 重新渲染组件。当第二次渲染发生时，将创建一个新的本地 const 来获取新值。此变量对第二次渲染上创建的任何内容都可见，但对第一次渲染上创建的内容不可见。因此，如果您想查看新值，请将日志语句放入组件的主体中，以便您可以看到它重新呈现的值。

const [recepies, setRecepies] = useState([]);
console.log('rendering with', recepies);