在为 forEach 循环中的每个单独循环设置状态后如何具有回调函数？

Question

在设置状态后尝试在每个单独的循环之后回调一个函数。但是回调将使用最近的状态而不是两个状态执行两次。

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 不应与setState 一起使用，因为状态更新是异步的。这可能会导致竞争条件，这就是这里的问题。

这就是updater function 的用途：

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