等待状态更新 useState 钩子答案

【问题标题】：Wait for state update useState hook等待状态更新 useState 钩子
【发布时间】：2020-08-20 13:56:18
【问题描述】：

我有一组处于状态的对象：const [objects, setObjects] = useState([]);

我有一个添加按钮，可以将对象添加到数组中，这是 onclick 事件的主体：

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

我有一个从数组中删除对象的删除按钮，这是 onclick 事件的主体：

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

现在，如果对象从状态中删除，我想对更新后的状态做一些事情。

问题是我必须等到状态更新，并且我不想监听每个状态更改，只有在删除某些内容时才可以。

这是我目前所拥有的：

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

但是如果一个对象被添加到状态中，这也会触发。

简而言之：当一个对象从对象数组中移除并且状态完成更新时，我想做一些事情

我想用钩子来做这个。

提前致谢！

【问题讨论】：

你能举个例子来说明你正在尝试做什么吗？为什么不在从数组中删除对象的函数中这样做呢？
@CelsoWellington 因为我必须在状态更新完成后执行这个

标签： javascript reactjs react-hooks react-state

【解决方案1】：

您可以编写自己的钩子或添加一些其他变量来保持数组的长度，并可用于检查是否删除或添加了元素。

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

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

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

【讨论】：