数组状态不能正确推送输入字段中的元素

Question

我试图从一个输入字段中收集元素。我有一个空数组的状态，但是当我试图将一个元素推入其中时，得到的数组总是延迟一个元素。我的意思是，如果我在数组中输入一个数字，并且我console.log它什么都不会发生，但是如果我插入另一个，那么我能够看到前面的那个。这就是我尝试过的，submitWeight函数是由提交按钮触发的。

代码：

const [inputWeight, setInputWeight] = useState("");
const [weight, setWeight] = useState([]);

const submitWeight = () => {
    setWeight([...weight, inputWeight]);
  };

这是JSX的部分：

<div className="input-container">
          <input type="text" onChange={(e) => setInputWeight(e.target.value)} />
          <button onClick={submitWeight}>SUBMIT</button>
        </div>

全部构成部分：

const MainContainer = () => {
  const [date, setDate] = useState(new Date());
  const [recipeOfTheDay, setRecipeOfTheDay] = useState("");
  const [recipeImg, setRecipeImg] = useState("");
  const [quoteOfTheDay, setQuoteOfTheDay] = useState("");
  const [modalClass, setModalClass] = useState("closed");
  const [inputWeight, setInputWeight] = useState("");
  const [weight, setWeight] = useState([]);

  //FUNZIONI
  const openClass = () => {
    setModalClass("open");
  };

  const closedClass = () => {
    setModalClass("closed");
  };

  const submitWeight = () => {
    setWeight([...weight, inputWeight]);
    console.log(weight);
  };

  //API
  useEffect(() => {
    axios
      .get(
        "https://zenquotes.io/api/random/9b5ee37d2eebfa303c900da058c17eaa914c5709"
      )
      .then((res) => setQuoteOfTheDay(res.data[0].q))
      .catch((err) => console.log(err));
    axios
      .get(
        "https://api.edamam.com/api/recipes/v2?type=public&q=beef&app_id=68835608&app_key=%20a13f4a407eb56c9970ab3732c77bc8cb%09&diet=high-protein&random=true"
      )
      .then((res) => setRecipeOfTheDay(res.data.hits[0].recipe.label))
      .catch((err) => console.log(err));

    axios
      .get(
        "https://api.edamam.com/api/recipes/v2?type=public&q=beef&app_id=68835608&app_key=%20a13f4a407eb56c9970ab3732c77bc8cb%09&diet=high-protein&random=true"
      )
      .then((res) => setRecipeImg(res.data.hits[0].recipe.image))
      .catch((err) => console.log(err));
  }, []);

  return (
    <div className="main-container">
      <div className="div-1">
        <img src={logo} alt="logo" className="logo" />
      </div>
      <div className="div-2">
        <h1>
          {date.getDate()} {date.getMonth()} {date.getFullYear()}
        </h1>
      </div>
      <div className="div-3">
        <h1>Add Weight</h1>
        <img
          src={plussign}
          alt="plus sign"
          className="plus-sign"
          onClick={openClass}
        />
      </div>
      <div className="div-4">
        <h1>ok</h1>
      </div>
      <div className="div-5">
        <div className="quote-container">
          <div className="quote-subcontainer">
            <h1>Quote Of The Day:</h1>
            <p>{quoteOfTheDay}</p>
          </div>
        </div>
        <div
          className="recipe-container"
          style={{ backgroundImage: `url(${recipeImg})` }}
        >
          <div className="recipe-subcontainer">
            <h1>Recipe Of The Day:</h1>
            <p>{recipeOfTheDay}</p>
            <img src={showmore} alt="show more" className="show-more" />
          </div>
        </div>
      </div>
      <div className="div-6">
        <div className="weight-history-container">
          <p>Enter your weight to start tracking.</p>
        </div>
      </div>

      <div className={`page-mask ${modalClass}`}></div>
      <div className={`modal-add-weight ${modalClass}`}>
        <p>What's your weight today?</p>
        <div className="input-container">
          <input type="text" onChange={(e) => setInputWeight(e.target.value)} />
          <h1> kg</h1>
        </div>
        <div className="modal-button-container">
          <button onClick={submitWeight}>SUBMIT</button>
          <button onClick={closedClass}>CLOSE</button>
        </div>
      </div>
    </div>
  );
};

谢谢!

Answer 1

setState (或者在您的例子中是setWeight函数)是异步的。因此，当直接在console.log下调用setWeight时，函数尚未执行，从而显示了旧值。

如果您想要console.log新的一个，或者在状态改变后做一些事情，您可以使用useEffect钩子。

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

如果您想更多地了解为什么设置状态是异步的，可以在下面的docs：https://reactjs.org/docs/state-and-lifecycle.html中找到它。