为什么我在 useState 中使用的数组在我将其记录到控制台时似乎落后了一种状态？

Question

我将数据从子组件传递到应用程序（父）组件，并在应用程序组件中使用状态将此数据添加到现有数组中。当我console.log这个数组时，它似乎总是落后一种状态。例如，当我按下将数据从子组件传递到应用程序组件的按钮时，日志显示为：

[]

但是当我在子组件中再次按下带有新数据的按钮时，console.log 显示的是我第一次按下时的数据，而不是第二次按下的新数据，似乎后面有一个状态更改。

代码如下。当我传递子组件底部的“添加项目”按钮时，它会通过 foodItemToApp 函数将食物数据传递到 App 组件，该函数作为 props 传递到 FoodConsumation 组件。一旦数据位于 App 组件中，在同一函数 foodItemToApp 中，我通过 setFoodConsumedList() 状态将其添加到 ConsumerFoodList 中。之后，我控制台记录它，这就是我遇到问题的地方。

儿童组件-食物消费

import { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function FoodConsumption(props) {
  const [show, setShow] = useState(false);
  const [foodItem, setFoodItem] = useState("");
  const [proteinContent, setProteinContent] = useState("");
  const [servings, setServings] = useState("");

  const handleClose = () => setShow(false);

  function submitHandler() {
    console.log("Submitted");
    setShow(false);
    const newFoodItem = {
      foodItem: foodItem,
      proteinContent: proteinContent,
      servings: servings,
    };
    console.log(newFoodItem);
    props.childToParent(newFoodItem);
  }

  function addFoodItemHandler() {
    setShow(true);
    setFoodItem("");
    setProteinContent("");
    setServings("");
  }

  function foodHandler(event) {
    setFoodItem(event.target.value);
  }

  function proteinContentHandler(event) {
    setProteinContent(event.target.value);
  }

  function servingsHandler(event) {
    setServings(event.target.value);
  }

  return (
    <>
      <Button variant="primary" onClick={addFoodItemHandler}>
        Add item
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>What did you eat?</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <form>
            <ol>
              <li>
                <label>What did you eat?</label>
                <input
                  type="text"
                  value={foodItem}
                  onChange={foodHandler}
                ></input>
              </li>
              <li>
                <label>How many grams of protein?</label>
                <input
                  type="text"
                  value={proteinContent}
                  onChange={proteinContentHandler}
                ></input>
              </li>
              <li>
                <label>How many servings?</label>
                <input
                  type="text"
                  value={servings}
                  onChange={servingsHandler}
                ></input>
              </li>
            </ol>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={submitHandler}>
            Add item
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

export default FoodConsumption;

应用程序组件

import "bootstrap/dist/css/bootstrap.min.css";
import DailyRequiredIntake from "./components/DailyRequiredIntake";
import CurrentWeight from "./components/CurrentWeight";
import { useState } from "react";
import FoodConsumption from "./components/FoodConsumption";
import DailyFoodConsumptionList from "./components/DailyFoodConsumptionList";

function App() {
  const [weightDataFromCurrentWeightComp, setWeightDataFromCurrentWeightComp] =
    useState("");

  const [foodItemFromFoodConsumption, setFoodItemFromFoodConsumption] =
    useState("");

  const [consumedFoodList, setConsumedFoodList] = useState([]);

  function foodItemToApp(foodItemData) {
    setConsumedFoodList((consumedFoodList) => [
      ...consumedFoodList,
      foodItemData,
    ]);
    console.log(consumedFoodList);
  }

  function currentWeightToApp(currentWeightData) {
    setWeightDataFromCurrentWeightComp(currentWeightData);
  }

  return (
    <>
      <DailyRequiredIntake
        consumedFoodData={foodItemFromFoodConsumption}
        currentWeight={weightDataFromCurrentWeightComp}
      />
      <CurrentWeight childToParent={currentWeightToApp} />
      <br></br>
      <FoodConsumption childToParent={foodItemToApp} />
      <DailyFoodConsumptionList
        consumedFoodData={foodItemFromFoodConsumption}
      />
    </>
  );
}

export default App;

我期望发生的是，当我按下此按钮时，会出现一个完全更新的状态，其中包含我输入到 FoodConsumation 输入中的最新信息。

Answer 1

React

useState

本质上是异步的，这就是您看到延迟更新的原因

建议：

向您的应用程序组件添加一个

useEffect

块以记录更新后的状态

  useEffect(() => {
    console.log(consumedFoodList);
  }, [consumedFoodList]);