Question

我遇到了更新状态数组变量的问题。我看了很多资源，但没有任何工作。

我已经 Updated 代码查看了如何方法彼此关联

这就是我最初在状态中定义数组的方式。

   constructor(props) {
         super(props);

         this.state = {
          test:[]
         }
       }

这是渲染方法。内部渲染方法中，我已调用 getQuizView（）方法

   render(){
        return ( 
          <div> 
            {this.getQuizView()}
          </div> 
        )
      }

在我的 updateArray（）方法中调用了 getQuizView（）方法

  getQuizView(){
  return (
        <div>
          {this.updateArray()}
        </div>        
  )
}

以下方法（updateArray（））用于更新状态变量。

updateArray(){
     for(var i=0; i<this.props.questions.length;i++){
      this.setState({ test: [...this.state.test, {id: this.props.questions[i].questionId, active: '0'}] })
    }
}

但是 setState 似乎无限发生。但 this.props.questions.length = 34

Answer 1

之所以进入inifite循环是因为您在for循环中执行setState永远不会那样做。您可以做的是获取一个本地数组变量，并为其分配this.state.test数组，然后将对象压入其中。最后在循环外执行setState。

您可以尝试下面的代码来避免无限循环。

  updateArray(){
       const questions = this.state.test;
       for(var i=0; i<this.props.questions.length;i++){
            questions.push({'id': this.props.questions[i].questionId, 'active': '0'});
      }
     this.setState({
         test: questions
    });
  }

您甚至可以对map或forEach进行相同操作，而不是for循环

使用.forEach：

updateArray(){
   const questions = this.state.test;
   this.props.questions.forEach(item => {
        questions.push({'id': item.questionId, 'active': '0'});
  });
 this.setState({
     test: questions
});
}

使用.map：

 updateArray(){
   const questions = this.props.questions.map(item => {    
             const object = {'id': item.questionId, 'active': '0'};
             return obj;
       });
  const allQuestions = [...this.state.test, questions];
  this.setState({
     test: allQuestions
  });
}

forEach和map之间的区别在于，forEach不返回新数组，而map返回一个新数组

Answer 2

问题是您正在使用render()方法更新状态。 render方法不应该有副作用，它只能用于“渲染” DOM。

反应的方式是，只要您在constructor()外部更新状态，它就会调用render方法，只需查看生命周期图

这是一个很好的来源React component

您正在做的是在渲染时更新state（updateArray（）），这又将导致再次调用render函数，然后render函数将更新state（updateArray（））并导致无限循环。

[渲染]-> [更新状态（updateArray（））]->渲染-> [更新状态] .....

只需从渲染中删除updateArray()方法到其他生命周期钩子，例如componentDidMount()

如果您想显示问题，只需更新getQuizView

   getQuizView(){
      return (
        <div>
          {this.props.questions.map((val)=>{
               <div>val</div>
                 })
           }
        </div>        
      )
  }

在React中将对象数组设置为状态变量

2 个答案: