如何为嵌套数组和对象设置状态？答案

【问题标题】：How can I setState for the nested array and objects?如何为嵌套数组和对象设置状态？
【发布时间】：2018-12-21 13:44:07
【问题描述】：

我需要以这种格式保存数据：

categoryselect: 0: {
  {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
  }
},: 1: {
  {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
  }
},

每当我点击新类别时，我需要在categoryselect 下创建一个新对象，如果我点击添加新问题，我需要在categoryselect[0].qustion[] 下创建一个对象。我试过这样，但它似乎没有做我想要的：

this.setState({
  categoryselect: [
    this.state.categoryselect,
    {
      question: [
        ...this.state.categoryselect.question,
        addQuestion
      ]
    }
  ],
});

【问题讨论】：

有什么理由选择categoryselect作为带有数字键的对象吗？
ya categoryselect 在用户选择newcategory 时必须作为对象分开有没有更好的解决方案？
你在下一个代码块中把它当作一个数组，所以你的意思是它从一开始就是一个数组？
是的，如果那是数组，我们可以使用对象@trincot 来方便吗

标签： javascript arrays reactjs multidimensional-array

【解决方案1】：

看起来categoryselect 应该真的是一个数组，像这样：

categoryselect: [{
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
}, {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
}]

这将使用相同的数字键，但除此之外，您将拥有一个 length 属性和数组方法。

当需要添加类别时，只需：

this.setState({
    categoryselect: [...this.state.categoryselect, {
        question: [],
        cateName: 'checkbox'
        name: '',
        status: 1
    }]
});

...要将问题添加到第一个类别，请执行以下操作：

this.setState({
    categoryselect: Array.from(this.state.categoryselect, (cat, i) =>
        i != this.state.categoryselect.length-1 ? cat 
             : {...cat, ...{question: [...cat.question, addQuestion]}}
    ) 
});

【讨论】：

它满足了我的一半需求，当添加一个新类别时，问题必须添加到新创建的对象中，但现在它被附加到上一个类别的问题中
您好，稍微修改了代码i ===(thisArg>0 && thisArg.length-1) ? cat : {...cat, ...{question: [...cat.question, addQuestion]}}，但现在我，当我创建一个新问题时，它会被添加到所有类别@trincot
而不是 arr 我只是更改了我得到未定义长度的名称所以添加了thisArg>0
this.state = { categoryselect:[ { question :[], cateName:'checkbox', name:'', status:1 } ], } 这样，我得到了 arr.length of undefined
唯一的问题是在添加问题时它会被附加到两个类别中，但对我来说它应该附加到特定类别中

【解决方案2】：

要创建您想要的对象，您可以使用以下脚本 -

 categoryselect = {
  0: {
   {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
   }
  },
  1: {
   {
    question: [],
    cateName: 'checkbox'
    name: '',
    status: 1
   }
  }
 }

var allCategories = categorySelect[Object.keys(categorySelect).length] = {
 question:[...this.state.categoryselect.question,
    addQuestion],
 cateName: 'checkbox'
 name: '',
 status: 1
}

this.setState({
 categoryselect: allCategories
});

【讨论】：