时间戳

首页 > 解决方案 > 反应 setstate 不更新对象数组

reactjs - 反应 setstate 不更新对象数组

问题描述

我正在尝试更新对象数组，但即使将正确的值传递给函数，该数组仍然是空白的。如果我尝试添加第二个对象，那么以某种方式添加了第一个对象，我不确定我做错了什么。

 const [qualifications, setQualifications] = useState([{}]);

  function handleAddQualification(values: any) {
    console.log(values);

    console.log(qualifications);

    setQualifications((prev) => {
      return [...prev, values];
    });

    console.log(qualifications);
  }

我传递的值被正确记录，随后的 2 个资格日志都显示一个空的对象数组。

我简化了对象，所以在我的屏幕截图中我添加了“一个”并且值记录正确，但资格数组保持空白。如果我添加第二个“二”条目，那么由于某种原因，它会将“一”添加到数组中。

请分享一些关于这里发生了什么的见解？

添加“一个”

添加“两个”

标签： reactjsuse-state

解决方案

这是事件循环如何工作的示例:)

在你的情况下：

  1. 打电话handleAddQualification
  2. 日志values，qualifications
  3. 作为异步操作添加setQualifications到队列
  4. 再次记录qualifications与步骤 3 相同的结果
  5. 这里可以处理之前添加的队列中的任务setQualifications
  6. setQualifications更新qualifications

看看这里以更好地理解https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

推荐阅读