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

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和if语句完成：

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            lists: [
                {
                    name: 'sampleList',
                    id: 15,
                    permission: {
                        canRead: true,
                        canWrite: false
                    }
                }
            ]
        }
    }

    invertCanRead(targetId) {
        this.setState({
            ...this.state,
            lists: this.state.lists.map(list => {
                if (list.id === targetId) {
                    // that is the one we want to modify, so let's return
                    // modified version:
                    return {
                        ...list,
                        permission: {
                            ...list.permission,
                            canRead: !list.permission.canRead
                        }
                    }
                } else {
                    // else return list as is without changes because
                    // it's not the one we want to modify, so just copy it:
                    return list;
                }
            })
        })
    }

    render() {
        return <div>
            {JSON.stringify(this.state)};
            <button onClick={() => this.invertCanRead(15)}></button>
        </div>
    }
}