useState 是如何设置变量的？ [复制]答案

【问题标题】：How does useState set variables? [duplicate]useState 是如何设置变量的？ [复制]
【发布时间】：2021-12-05 19:19:15
【问题描述】：

我过去曾发布过类似的内容，但从未真正得到答案，而且我一直遇到这个问题。我的应用程序中的东西正在运行，但我不确定为什么。我正在使用第三方 api 制作一个简单的食谱应用程序。我传递到组件中的数据按预期显示，但未按预期登录控制台。
App.js 的第 20 行正在记录我所期望的（从 api 接收的数据）。 Recipe.jsx 的第 4 行记录了我期望的内容（recipes 数组中的每个项目）。但是 App.js 的第 22 行返回为未定义。我希望因为我将Recipes 设置为“数据”，所以“食谱”的记录与“数据”相同。谁能给我解释一下？

import React, { useEffect, useState } from "react";
import "./App.css";
import Recipe from "./Recipe";
import axios from "axios";

function App() {
  const APP_ID = "XXXXXXXX";
  const APP_KEY = "XXXXXXXXXXXXXXXXXXX";
  const url = `https://api.edamam.com/api/recipes/v2?type=public&q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}`;
  const [recipes, setRecipes] = useState([]);
  useEffect(() => {
    getRecipes();
  }, []);
  const getRecipes = async () => {
    const res = await axios(url);
    const data = await res.data.hits;
    console.log(data);
    setRecipes(data);
    console.log(recipes);
  };
  return (
    <div className="App">
      <form className="search-form">
        <input className="search-input" type="text" />
        <button className="search-button" type="submit">
          Search Recipes
        </button>
      </form>
      {recipes &&
        recipes.map((recipe, idX) => <Recipe recipe={recipe} id={idX} />)}
    </div>
  );
}

export default App;

import React from "react";

const Recipe = ({ recipe, id }) => {
  console.log(recipe);
  return (
    <div key={id}>
      <h1>{recipe.recipe.label}</h1>
      <p>{recipe.recipe.calories}</p>
      <img src={recipe.recipe.images.SMALL.url} alt="" />
    </div>
  );
};

export default Recipe;

【问题讨论】：

react 中的 setState 函数是异步的，这就是您未定义的原因。
新设置的值直到下一个渲染周期才可用。这按预期工作。

标签： javascript reactjs react-hooks use-state

【解决方案1】：

SetState 是异步的，可能无法立即解决。有关详细信息，请参阅文档的这一部分

https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

正如您所说，返回的数据是正确的，并且您已经调用了 set state。但是当你进入下一行的状态时，状态还没有解决

【讨论】：