反应 setstate 不更新对象数组

Question

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

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

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

    console.log(qualifications);

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

    console.log(qualifications);
  }

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

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

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

Answer 1

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

在你的情况下：

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

Answer 2

状态更新调用是异步的，您无法通过在更新调用后立即记录来查看它们。

1. 第一个对象是空的，因为您已经在默认状态下定义了它，并且您使用以前的状态更新了新状态，因此空对象始终作为数组中的第一个元素。 要解决此问题，请将您的qualifications设置为

interface Qual {
  subject?: string;
  level?: string;
  other?: string
}

const [qualifications, setQualifications] = useState<Qual[]>([]);

2. 如果您想在每次更新时记录状态，请使用效果钩子，就像这样

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