Правильный способ установить свойство вложенного объекта со свойствами массива

Question

Добрый день! У меня есть вложенное состояние с дочерними массивами, и я хотел бы знать правильный и лучший способ setState.

Вот пример объекта состояния. EDITED , забыл упомянуть, что 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

Способ изменить определенный элемент массива с помощью 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>
    }
}

Answer 2

Вы можете создать копию массива 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>