反應 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])