How to have a callback function after setting the

Question

trying to callback a function after each individual loop after setting the state. but the callback will execute twice with the most recent state rather then both states.

onAddClick = () => {
    this.state.tempAddList.forEach((id) => {
        console.log("add", id);
        this.setState({modInfo: {...this.state.modInfo, modId: id}},()=>this.addModifier());
    });

};
addModifier = () => {
    console.log(this.state.modInfo);
    EdmApi.insertModifier(this.state.modInfo)
        .then(res => console.log(res))
        .catch(err => console.log(err));

};

Answer 1

this.state shouldn't be used together with setState because state updates are asynchronous. This may result in race condition, which is the problem here.

This is what updater function is for:

this.state.tempAddList.forEach((id) => {
    this.setState(
      state => ({modInfo: {...state.modInfo, modId: id}}),
      ()=>this.addModifier())
    ;
});