等待 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]);