Javascript 在React中运行useEffect后，处于状态的数组未更新

我是React.js的新手。我正在尝试使用钩子更改处于状态的变量

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;

import React，{useState，useffect}来自“React”；
导入“/App.css”；
函数App（）{
const[recepies，setRecepies]=useState（[]）；
useffect（（）=>{getRecepies（）}，[]）；
//const example=某个有效的API URL
const getRecepies=async（）=>{
const response=等待获取（示例）；
const data=wait response.json（）；
//data.hits是由10个对象组成的数组
setRecepies（data.hits）；
控制台日志（接收器）；
//什么也不印
}
报税表（
);
}
导出默认应用程序；

---

问题是

setRecepies

没有更新

recepies

状态。这是为什么？

data.hits

是一个有效数组，它有10个对象，我正在使用API获取这些对象

recepies

是一个本地

const

。它永远不会改变，这不是

setRecepies

想要做的。将日志语句放在您放置的位置只能注销创建

getRecepies

时

recepies

所等于的内容

setRecepies

的目的是告诉react以重新启动组件。当第二次渲染发生时，将创建一个新的本地

const

，它将获得新值。此变量对在第二次渲染中创建的任何对象可见，而不是对在第一次渲染中创建的对象可见。因此，如果您想查看新值，请将日志语句放在组件的主体中，这样您就可以查看它的重排序值

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

---

当我尝试在

getRecepies（）

函数之外

console.log（recepies）

时，它可以工作，但它会记录数组两次！为什么？因为组件渲染了两次。第一次渲染有一个空数组，然后获取一些数据并设置状态，然后使用新数据再次渲染。这是有道理的，但在这两种情况下，它都记录相同的数组。它应该第一次记录一个空数组，然后记录另一个信息正确的数组？是的，它应该记录一个空数组，然后记录一个填充的数组。哪个数组渲染两次？它在两种情况下都显示填充的数组。我在

getRecepies（）函数结束之后，在
返回之前，调用了
console.log（recepies）