Question

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

这是一个示例状态对象。 已编辑，忘记了lists是array of objects。

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数组的副本，然后将要更改的索引的对象替换为同一对象的副本，但是要在其中更改permission。

示例

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>

Answer 2

使用setState更改数组的特定元素的方法是不更改而直接复制数组的所有项目，但目标项目除外，这可以使用.map和{ {1}}语句：

if

使用数组属性设置嵌套对象属性的setState的正确方法

2 个答案: