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

我在更新状态数组变量时遇到问题。我找了很多资源，但都没有找到

我已经更新了代码，以查看 方法是相互关联的

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

   constructor(props) {
         super(props);

         this.state = {
          test:[]
         }
       }

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

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

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

render（）{
报税表（
{this.getQuizView（）}
)
}

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

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

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

getQuizView（）{
返回(
{this.updateArray（）}
)
}

以下方法（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'}] })
    }
}

updateArray（）{
对于（var i=0；i它进入inifite循环的原因，因为您正在执行setState in for循环。您可以做的是获取一个局部数组变量，并用this.state.test数组分配它，然后将对象推入其中。最后在for循环外部执行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：

 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返回新数组。问题是您正在更新
render（）
方法中的状态。render方法不应该有副作用，它必须纯粹用于“呈现”DOM

react的工作方式是，每当您在
constructor（）
之外更新状态时，它调用render方法，只需查看生命周期图

这是一个很好的来源

您所做的是在渲染时更新状态（updateArray（）），这将导致再次调用渲染函数，然后渲染函数将更新状态（updateArray（）），并导致无限循环

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

[呈现]->[更新状态（updateArray（））]->呈现->[更新状态]

只需将
updateArray（）
方法从呈现中删除到其他生命周期挂钩，如
componentDidMount（）

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

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

getQuizView（）{
返回(
{this.props.questions.map（（val）=>{
瓦尔
})
}
)
}
您应该只更新一次状态（没有循环）。您可以将
this.props.questions
的内容编辑到您的问题中吗？您在哪里调用updateArray（）函数？您可以在此处粘贴完整的代码还是设置fiddler/codesandbox@TiisetsoTjabane我打电话到updateArray（）函数位于另一个函数内，但该函数已在render方法内调用。不要忘记
此.state.test中的现有值也应包含在
设置状态中。修复了
映射
示例以正确使用
映射
而不是复制粘贴
forEach
：）映射应该发生在this.props.questions上，而不是this.state.test上。我说的对吗？@Sulthan以前的测试数组值也是需要的，我们需要在this.props.questions上进行映射，但是你在this.state.test上进行了映射。如果你有问题映射的解决方案，请编辑我的答案，并且新返回的映射数组应该保持存在也正在初始化数组值。如果我说错了，请纠正我。好吧，您是正确的，但是在这种情况下，
map
根本不应该使用。如果您没有使用
map
的返回值，请不要使用
map
。您仍然像使用
forEach
一样使用它。可能类似于：
const newQuestions=this.state.test.map（question=>（{…}））；const questions=[…this.state.test，…newQuestions]；