如何在 React JS 的嵌套对象中设置状态？答案

【问题标题】：How to setState in nested objects inReactJS?如何在 React JS 的嵌套对象中设置状态？
【发布时间】：2020-02-26 17:42:00
【问题描述】：

我正在尝试 setState 在 2 个数组的对象中。每个数组都有自己的对象。我正在尝试在单击按钮时创建新的组和行。所以我有一个名为groups 的对象，它有一个名为firstGroup 的数组，然后是另一个名为secondGroup 的数组。我有一个点击监听器handleSecondGroup，它应该向secondGroup 添加一个新行。但是在secondGroup 上执行 setState 似乎不起作用。不知道我怎么能做到这一点。

这是我的代码的样子：-

这是 App.vue 文件

import React, {Component} from 'react';
import './App.css';
class App extends Component {
 state = {
    groups {
         firstGroup: [
             { id: 0, title: 'New Group', rows: [{ id: 0,value: 'row1', options: 
        [1,2,3,4,5]}] }
          ],
         secondGroup: [
             {id:0 , title: 'New Group', options: [1,2,3,4,5] }
          ]
      }
 }

handleSecondGroup = () => {
   const groups = [...this.state.groups.secondGroup, { id:this.state.groups.length, title: 'New Second Group', options: [1,2,3,4,5}]
    this.setState({
  groups
 })
console.log(groups)
}

  export default App;

我不确定这是否是在嵌套对象中设置状态的正确方法？任何帮助将不胜感激。

【问题讨论】：

请提供一个完整有效的例子，它的语法不正确。
这能回答你的问题吗？ How to update nested state properties in React

标签： javascript reactjs

【解决方案1】：

我不确定你要根据什么添加第三组，但这里有一个添加任意第三组的实际示例：

const thirdGroup = {
  id: 3,
  title: 'New Third Group',
  options: [1]
};

class App extends Component {
  state = {...}

  handleSecondGroup = () => {
    this.setState(prevState => {
      const prevGroups = prevState.groups;
      return { groups: { ...prevGroups, thirdGroup } };
    });
  };

  render() {
    return (
      <>
        <pre>{JSON.stringify(this.state.groups, null, 2)}</pre>
        <button onClick={this.handleSecondGroup}>Add Group</button>
      </>
    );
  }
}

【讨论】：

【解决方案2】：

您尝试setState 的结果对象结构不正确。

export default class App extends Component {
    state = {
        groups : {
            firstGroup: [
                { 
                    id: 0, 
                    title: 'New Group', 
                    rows: [
                        { 
                            id: 0,
                            value: 'row1', 
                            options: [1,2,3,4,5]
                        }
                    ] 
                }
            ],
            secondGroup: [
                {
                    id:0, 
                    title: 'New Group', 
                    options: [1,2,3,4,5] 
                }
            ]
        }
    }

    handleSecondGroup = () => {
        const groups = { ...this.state.groups };

        groups.secondGroup.push({
            id: groups.secondGroup.length, 
            title: 'New Second Group', 
            options: [1,2,3,4,5]
        });

        this.setState({ groups });
    }
}

【讨论】：

.push mutates the state.
它不像我们之前将其分配给局部变量那样。
将其分配给局部变量不会复制除立即值以外的任何内容，在本例中是对 groups 对象的引用，与 this.state 中的相同。

【解决方案3】：

您仅用更新后的 secondGroup 替换组。首先复制组对象，然后更新嵌套数组。和选项：[1,2,3,4,5] 缺少方括号。

handleSecondGroup = () => {
    const groups = {...this.state.groups, secondGroup: [...this.state.groups.secondGroup, { id:this.state.groups.length, title: 'New Second Group', options: [1,2,3,4,5]}]}
    this.setState({ groups })
    console.log(groups)
}

【讨论】：