即使使用setTimeOut之后，setState也会立即更新

Z时代
2024-01-10
分类：问答

我有一个包含10个元素的div，这些元素将被逐个更新，延迟时间为2秒。下面是相同的代码

    for(let boxNo=0; boxNo<10; boxNo++){
      setTimeout(() => {
        nodes[boxNo].isMarked = true;
        this.setState({nodes});
        }, (boxNo*200)+boxNo);
      );
    }

但是，当我运行它时，所有元素都会一起更新。该程序只是添加一个延迟添加一个开始，并且所有元素都一起更新（被标记）。如何制作代码来逐一标记元素？

回答：

您正在打破React的两个基本规则：

不要直接改变状态

        for(let boxNo=0; boxNo<10; boxNo++){
      setTimeout(() => {
        nodes[boxNo].isMarked = true; // <==== here
        this.setState({nodes});
        }, (boxNo*200)+boxNo);
      );
    }

如果根据现有状态更新状态，请使用回调形式，因为状态更新可能是异步的（无论如何，在您的示例中，时间已经过去了）：

        for(let boxNo=0; boxNo<10; boxNo++){
      setTimeout(() => {
        nodes[boxNo].isMarked = true;
        this.setState({nodes});       // <==== here
        }, (boxNo*200)+boxNo);
      );
    }

相反，请参见***注释和相关代码：

    // **IF** `nodes` is an array
    for(let boxNo=0; boxNo<10; boxNo++){
      setTimeout(() => {
        // *** Note using callback form (#2)
        this.setState(({nodes} => {
            // *** *Copy* the parts of state you're going to modify (#1)
            nodes = [...nodes];
            nodes[boxNo] = {...nodes[boxNo], isMarked: true};
            return {nodes};
        });
        }, (boxNo*200)+boxNo);
      );
    }

该setState调用也可以这样编写，但要花一些时间（创建临时对象）：

    this.setState(({nodes} => ({
        nodes: Object.assign([], nodes, {[boxNo]: {...nodes[boxNo], isMarked: true}})
    });

要么

    // **IF** `nodes` is a non-array object
    for(let boxNo=0; boxNo<10; boxNo++){
      setTimeout(() => {
        // *** Note using callback form (#2)
        this.setState(({nodes} => {
            // *** *Copy* the parts of state you're going to modify (#1)
            return {
                nodes: {
                    ...nodes,
                    [boxNo]: {...nodes[boxNo], isMarked: true}
                }
            };
        });
        }, (boxNo*200)+boxNo);
      );
    }