javascript - 在 reactjs 中更新嵌套状态

Question

我的状态是嵌套的，我很难设置状态。错误:undefined 不是对象(正在评估 this.state.form)我的初始状态是:

this.state={
    activePage:0,
    visible:false,
    questionType:null,
    form:{
        title:'',
        description:'',
        pages:[{
            title:'',
            description:'',
            questions:[

            ]
        }]
    }
};

现在每次用户点击时，我都需要向 pages 数组添加更多对象，它应该有一个标题 ('')、描述 ('') 和问题(空列表)。我尝试实现这一点，但它似乎没有用。

let newForm={
     ...this.state,
     form:{
          ...this.state.form,
          pages:[
               ...this.state.form.pages,
               pageData
          ]
     }
 };
 console.log('newForm',newForm);
 this.setState({
     form:newForm
 });

这是我的页面数据的样子

let pageData={
    title:'',
    description:'',
    questions:[]
};

Answer 1

您正在 newForm 中设置整个 state。只需将其限制为 form 对象即可:

let newForm = {
  ...this.state.form,
  pages: [
    ...this.state.form.pages,
    pageData
  ]
};

console.log('newForm', newForm);

this.setState({
  form: newForm
});