for循环里面的setState不更新状态：React+Typescript

Question

我有一个对象数组，它是一个对应于用户帐户的状态对象。仅出于验证目的，如果数组中的任何一个对象属性为空，我将状态对象的验证属性设置为 false。由于我正在循环使用 for 循环，所以 setState 没有设置数据。

 this.state = {
      accounts: [{firstname:"",lastname:"",age:""}],
      validated: true
 };


onAdd = () => {

    let { accounts,validated } =  this.state;
    for(let i=0; i< accounts.length; i++){
      if(accounts[i].firstname === '' || accounts[i].age === '')
      {
        this.setState({validated: false},() => {}); // value is not getting set
        break;
      }
    }
    if(validated)
    {
      // some other operation 
      this.setState({validated: true},() => {});
    }
  }

render(){

   let { validated } =  this.state;
   return(
     {validated ? <span>Please fill in the details</span> : null}
       //based on the validated flag displaying the error message
   )
}

Answer 1

setState 是 async 函数。所以它不会循环工作。

来自docs

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

另请参阅。

Answer 2

您的代码中存在多个问题。首先 this.setState 是异步的，因此你不能说它真正执行的时间。

所以如果你打电话给

this.setState({validated: false},() => {});

你不能相信在那之后 this.state.validated 立即是错误的。

所以在你调用 this.setState 生成 validated == false 然后检查之后：

if(this.state.validated)
{
  // some other operation 
  this.setState({validated: true},() => {});
}

它可能是对还是错。

但是在您的代码中，您在方法的开头提取了 validated（您在 if-condition 中使用的内容）。这意味着当 this.state 改变时 validated 不会改变。

您可能希望使用已添加的回调 (() => {}) 在状态更改后执行一些其他操作，或者只使用普通变量而不是与状态相关的变量。

喜欢：

tmp = true;

for-loop {
  if(should not validate) {
    tmp = false;
    this.setState({validated: false});
    break;
  }

if(tmp) {
  this.setState({validated: true},() => {});
}

Answer 3

尝试单独检查状态下的数组，并根据数据是否丢失，您可以将临时变量设置为 true 或 false。然后根据临时变量，您可以相应地设置状态。

让我知道这是否有效：

onAdd = () => {

  let { accounts,validated } =  this.state;
  let tempValidate = true; //assume validate is true
  for(let i=0; i< accounts.length; i++){
    if(accounts[i].firstname === '' || accounts[i].age === '')
    {
      //this loop will check for the data validation, 
      //if it fails then you set the tempValidate to false and move on
       tempValidate = false
      break;
    }
  }

  // Set the state accordingly
  if(tempValidate)
  {
    this.setState({validated: true},() => {});
  } else {
    this.setState({validated: false},() => {});
  }
}

for循环里面的setState不更新状态：React+Typescript

setState inside for loop does not update the state: React+Typescript

setstate

reactjs