Javascript 使用对象中的嵌套数组值设置状态数组

我使用提取api数据的存储状态初始化组件状态。 我按对象名过滤数据数组。然后，这将使用用户通过按钮选择的对象设置状态。这样，所有对象都会更改而不会出现问题。我一生都无法解决的问题是，我想要的是使用与该类别关联的对象的嵌套数组来设置state onClick。因此，每个类别对象都有一个嵌套的子类别数组，其中包含许多子类别

因此，一个通用的例子是：

const arr = [
 { name: 'Do', id: 1, sub: [{sub_id: 1, something: 'dog'}, {sub_id: 1, something: 'cat'}] },
 { name: 'Re', id: 2, sub: [{sub_id: 2, something: 'bird'}, {sub_id: 2, something: 'mouse'}] },
 { name: 'Me', id: 3, sub: [{sub_id: 3, something: 'lion'}, {sub_id: 3, something: 'moose'}] }
];
class BrainFart extends Component {
    constructor(props) {
       super(props)
       this.state = { foo: [] }
    }
    handleArray() {
      const stuff = arr.filter(c => c.sub)
      this.setState({foo: stuff})
    }

} 

这将不会设置子对象的嵌套数组的状态。。。 有什么想法吗？

---

谢谢

将您的

handleArray

功能更新为：

handleArray() {
    const stuff = arr.filter(c => c.sub);

    this.setState({ foo: [...this.state.foo, ...stuff] });
}

请注意在组件状态上为

foo

属性设置新值时所做的更改。在本例中，我们基于以前的和新的数据（

stuff

）创建一个新数组

阅读有关react docs的更多信息

---

当前的问题是将

foo

设置为

foo.push（stuff）

的输出

方法将一个或多个元素添加到数组的末尾，并返回数组的新长度

---

阅读更多关于

的信息以引用

push（）

doc:push（）方法将一个或多个元素添加到数组的末尾，并返回数组的新长度。上次编辑后，您希望的输出是什么？您希望您的三个

arr

项目处于

state.foo

？或者想要这六个（当组合所有

子
数组时的总项目数）？我最终接受了你的答案，因为Flow必须处理稍微不同的内容。const stuff=selected.filter（b=>b）[0]。sub this.setState（{foo:stuff}）工作得很好。谢谢你，好的。请随意标记/接受答案。根据您的评论提出的问题：您可以只保留第一个
sub
数组，还是最终的目的是获得一个包含所有
sub
数组上所有项目的数组？实际上，我想同时执行这两个操作，但一次只能单击一个子数组。在一个完美的情况下，我想显示每个类别的所有子数组中的每个项目，然后在用户单击标记时过滤它们。您可以使用
array实现这一点。reduce
可展平所有
sub
数组。