等待 state 更新 useState 鈎子

Question

我在 state 中有一個對象數組： const [objects, setObjects] = useState([]);

我有一個添加按鈕，可將 object 添加到數組中，這是 onclick 事件的主體：

setObjects([...objects, { id: 20, property1: value1 }]);

我有一個刪除按鈕，可以從數組中刪除 object，這是 onclick 事件的主體：

const newObjects = objects.filter(object => { return object.id;== idToRemove; // idToRemove comes from the onclick event }); setObjects(newObjects);

現在，如果從 state 中刪除 object，我想對更新的 state 做一些事情。

問題是我必須等到 state 更新，我不想聽每一個 state 更改，只有在刪除某些東西的情況下。

這是我到目前為止所擁有的：

useEffect(() => { //execute a function that uses the updated state }, [objects.length]);

但是，如果 object 被添加到 state 中，這也會觸發。

簡而言之：當 object 從對象數組中刪除並且 state 完成更新時，我想做一些事情

我想用鈎子來做這個。

提前致謝！

Answer 1

您可以編寫自己的鈎子或添加一些其他變量來保持數組的長度，並可用於檢查元素是否被刪除或添加。

const [len, setLen] = useState(0);

useEffect(() => {
  if (objects.length < len) {
    // Your code
  }

  setLen(objects.length);
}, [objects.length]);