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

Question

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

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

但是当我运行它时，所有元素都会一起更新。该程序只是在开始时添加了一个延迟添加，并且所有元素一起更新(isMarked)。如何编写代码来逐一标记元素？

Answer 1

你违反了 React 的两条基本规则:

1. Don't mutate state directly

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

2. 如果根据现有状态更新状态，use the callback form因为状态更新可能是异步的(无论如何，在您的示例中，时间已经过去):

   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);
  );
}