Javascript 更新reactjs中的嵌套状态

我有一个嵌套的状态，我很难设置这个状态。 错误：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:[]
};

---

您正在

newForm

中设置整个

状态。只需将其限制为
表单
对象：

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

console.log('newForm', newForm);

this.setState({
  form: newForm
});

每当您看到自己处于一种状态变得越来越复杂或嵌套的情况时，这意味着您应该重新思考组件结构，我的意思是您应该引入更多的粒度组件来管理自己的状态

那么，为什么不将状态中的表单对象完全移动到另一个组件中呢

我建议为表单对象创建单独的组件，并让表单组件管理表单状态

import React, { Component } from 'react';

class form extends Component {
    state = {
      form:{
            title:'',
            description:'',
            pages:[{
                title:'',
                description:'',
                questions:[

                ]
            }]
        }
    }

    render() {
    //Form content
    }
}

export default form;

更细粒度的组件更易于管理，这正是您在React中应该采用的方式。
“似乎不起作用”-具体问题是什么？未定义不是obect（评估this.state.form）。这实际上是一个注释，而不是答案。您好，adiga，您对小型JavaScript咨询工作感兴趣吗？更多详细信息：。例如，我们想外包一个解析器来从背景图像中提取梯度。请说，当你读到这一点，所以这个评论可以被删除。谢谢