等待 state 更新 useState 钩子

Question

I have an array of objects in state: const [objects, setObjects] = useState([]);

I have an add button that adds an object to the array, this is the body of the onclick event:

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

I have a remove button that removes an object from the array, this is the body of the onclick event:

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

Now I want to do something with the updated state if an object gets removed from the state.

The problem is I have to wait till the state is updated and I don't want to listen for every state change, only if something is removed.

This is what I have so far:

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

But this also fires of if an object gets added to the state.

In short: I want to do something when an object gets removed from the objects array and the state is finished updating

I would like to do this with hooks.

Thanks in advance!

Answer 1

You could write your own hook or add some other variable that will keep the array's length and which could be used to check whether element was removed or added.

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

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

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