在 React 中运行 useEffect 后，状态中的数组未更新答案

【问题标题】：Array in state not updating after useEffect runs in React在 React 中运行 useEffect 后，状态中的数组未更新
【发布时间】：2020-04-28 21:01:11
【问题描述】：

我对 React.js 非常陌生。我正在尝试使用钩子更改处于状态的变量recepies。下面是我的代码sn-p：

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 个对象。

【问题讨论】：

标签： javascript json reactjs asynchronous async-await

【解决方案1】：

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

setRecepies 的目的是告诉 react 重新渲染组件。当第二次渲染发生时，将创建一个新的本地const，它将获得新的值。此变量对在第二次渲染上创建的任何东西都是可见的，而不是对在第一次渲染上创建的东西可见。因此，如果您想查看新值，请将您的日志语句放在组件的主体中，这样您就可以看到它正在重新渲染的值。

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

【讨论】：

当我尝试在getRecepies() 函数之外使用console.log(recepies) 时，它可以工作，但它会记录数组两次！这是为什么呢？
因为组件渲染了两次。第一次渲染有一个空数组，然后您获取一些数据并设置状态，然后使用该新数据再次渲染。
这是有道理的，但在这两种情况下，它都记录相同的数组。它应该第一次记录一个空数组，然后是另一个包含信息的数组？
是的，它应该记录一个空数组，然后是一个填充数组。哪个数组渲染了两次？
它在这两种情况下都显示了填充的数组。我在getRecepies() 函数结束后，return 之前调用了console.log(recepies)