等待状态更新useState hook

Question

我有一组对象处于以下状态：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]);

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

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

我想用钩子做这个。

提前致谢！

Answer 1

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

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

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

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

等待状态更新useState hook

Wait for state update useState hook

javascript

reactjs

react-hooks

react-state