javascript - 关于在 for 循环中使用 setState 更新状态的语法问题

Question

我正在尝试根据特定条件更新状态，这些条件包括赋予数组中特定对象的值。我尝试了各种语法，这些语法给我带来了错误，例如 this.setState(this.state.destinations[i].map(destinations=>destinations.visibilityStatus=false))除了 setState 之外，写的是有效的。在下面的代码中，您将找到相关函数，其中使用其当前语法更新所有对象的 visibilityStatus 而不是特定对象。我如何编写 setState 以便它理论上以这种方式更新状态 this.setState (this.state.destinations.map(destinations=>destinations.visibilityStatus=false)) (仍然不起作用)this.state.destinations[i].visibilityStatus===false

这是该函数的当前代码，如果您需要更多详细信息，请告知，但通常情况下，这就足够了，因为它更多的是语法问题，而不是逻辑结构问题。感谢您的宝贵时间:

updateDestinationsVisibilityStatus=()=>{
      for(var i =0; i<this.state.destinations.length; i++){
          for( var n=0; n<this.state.destinations[i].visibilityTime.length; n++){
          if(this.state.destinations[i].visibilityTime[n].visibility===false && this.state.timerString===this.state.destinations[i].visibilityTime[n].value)
          {  this.setState (this.state.destinations.map(destinations=>destinations.visibilityStatus=false))}

          else if (this.state.destinations[i].visibilityTime[n].visibility===true && this.state.timerString===this.state.destinations[i].visibilityTime[n].value)
          {  this.setState (this.state.destinations.map(destinations=>destinations.visibilityStatus=true))}
          console.log(this.state.destinations[i].visibilityStatus)

      }
    }

  }

Answer 1

切勿在每个事件中对一个属性多次调用 setState。它是异步的，状态不会立即改变。根据经验，您应该确保传递 updater function如果您多次调用它。

这就是你的情况:

updateDestinationsVisibilityStatus = () => {
    let dest = this.state.destinations; // use local variable
    for (let i = 0; i < dest.length; i++) {
        for (let n = 0; n < dest[i].visibilityTime.length; n++) {
            if (dest[i].visibilityTime[n].visibility === false && this.state.timerString === dest[i].visibilityTime[n].value) {
                dest[i].visibilityStatus = false; // manipulate that local
            } else if (dest[i].visibilityTime[n].visibility === true && this.state.timerString === dest[i].visibilityTime[n].value) {
                dest[i].visibilityStatus = true;
            }
        }
    }

    this.setState({destinations: dest}); // write back to state
}