javascript - setState 具有数组属性的嵌套对象的属性的正确方法

Question

美好的一天!我有一个带有数组子项的嵌套状态，我想知道 setState 的正确和最佳方法。

这是一个示例状态对象。 已编辑，忘记提及列表是一个对象数组。

this.state = {
     lists:
          [{

               name: 'sampleList',
               id: 15,
               permission: {
                    canRead: true,
                    canWrite: false
               }
          }]
     }
}

我使用它来设置权限属性的状态，但状态未更新。

this.setState({
     ...this.state, lists: {
          ...this.state.lists, key: [
               ...this.state.lists.key, permission : {
                    ...this.state.lists.key.permission, 
                    canRead: !this.state.lists.key.permission.canRead
               }
          ] 
     }
 });

希望你能帮助我。谢谢!

Answer 1

您可以创建 lists 数组的副本，然后将要更改的索引的对象替换为同一对象的副本，但您在其中更改了权限.

示例

class App extends React.Component {
  state = {
    lists: [
      {
        name: "sampleList",
        id: 15,
        permission: {
          canRead: true,
          canWrite: false
        }
      }
    ]
  };

  updateList = (index, canRead, canWrite) => {
    this.setState(prevState => {
      const lists = [...prevState.lists];
      lists[index] = { ...lists[index], permission: { canRead, canWrite } };
      return { lists };
    });
  };

  render() {
    return (
      <div>
        <button onClick={() => this.updateList(0, false, true)}>
          Update state
        </button>
        <div>{JSON.stringify(this.state)}</div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>