Question

我使用存储状态初始化组件状态，该状态会提取api数据。我按对象名称过滤数据数组。然后，这将使用用户通过按钮选择的对象setState。这有效，所有对象都没有问题。我不能解决的问题是我想要的是使用与该类别相关联的嵌套对象数组来setState 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})
    }

}

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

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的反应文档。

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

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

详细了解push

使用来自对象

1 个答案: