Question

我有一个嵌套数组，我正在尝试更新一些属性，但是我不知道react的语法来做到这一点。

this.state = {
databasesList: {
        name: 'Databases',
        toggled: true,
        children: [
          {
            name: 'OneDatabase',
            children: [
              { name: 'collection1' },
              { name: 'collection2' }
            ]
          }
        ]
      }
}

我正在尝试对此进行更新，但是它不起作用：

this.setState({ this.state.databasesList.children[0].children: newData })

Answer 1

要在React中设置嵌套状态，您应该使用JS Spread运算符，因此在您的示例中应该是这样的：

this.setState((prevState) => ({
  ...prevState,
  databasesList: {
    ...prevState.databasesList,
    children: {
      ...prevState.databasesList.children[0],
      children: {
        newData,
      },
    },
  },
}));

Answer 2

如果要使用lodash set，这是一个非常漂亮的解决方案。 https://twitter.com/stwilz/status/1092958989208317952

但是，如果您只是想自己使用set，那么这将是您的最佳选择。

    const yourFunction = newData => this.setState(state => set(state, ['databasesList', 'children', 0, 'children'], newData));

传播操作符也可以正常工作。当您有一个巨大的状态对象时，它就会变得超级冗长。

如何在React中使用数组更新嵌套状态？

2 个答案: