反应 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. 第一个对象是空的，因为您已经在默认状态下定义了它，并且您使用以前的状态更新了新状态，因此空对象始终作为数组中的第一个元素。要解决此问题，请将您的 interface Qual { subject?: string; level?: string; other?: string } 设置为

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

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

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

public static void copyRange(int[] a1, int[] a2, int i1, int i2, int length) {
    for (int i = i2; i < i2 + length; i++) {
        a2[i] = a1[i1];
        i1++;
    }
}