javascript - 使用来自对象的嵌套数组值设置状态数组

Question

我使用提取 api 数据的存储状态初始化组件状态。我按对象名称过滤数据数组。然后，这将使用用户通过按钮选择的对象来设置状态。这行得通，所有对象都毫无问题地改变了。我终生无法解决的问题是我想要的是使用与类别关联的嵌套对象数组来设置 setState onClick。因此每个类别对象都有一个嵌套的 subCategory 数组，其中包含许多子类别。

所以一个通用的例子是:

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

} 

这不会用嵌套的子数组设置状态...有什么想法吗？谢谢

Answer 1

将您的 handleArray 函数更新为:

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

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

请注意为组件状态的 foo 属性设置新值时的变化。在这种情况下，我们根据以前的数据和新数据 (stuff) 创建一个新数组。

阅读更多关于 how to modify component state 的 React 文档.

---

当前的问题是将 foo 设置为 foo.push(stuff) 的输出。

The push() method adds one or more elements to the end of an array and returns the new length of the array.

阅读更多关于 push 的信息