在Reactjs中设置嵌套对象状态的正确方法是什么？

Question

此代码段从我目前在这家X公司工作的软件中复制了我的问题。import React, { Component } from 'react';import { render } from 'react-dom';import Hello from './Hello';import './style.css';class App extends Component {  constructor() {    super();    this.state = {      name: 'React',      some:{        name:"axys",        a:[1,2.23,46,612,5],        z:{          a:2,          b:5,          c:6,        }      }    };  }handler = () =>{  console.log(this.state);  this.setState({    some:{      z:{        a:1111      }    }  },()=>{    console.log(this.state);  })}  render() {    return (      <div>        <Hello name={this.state.name} />        <button onClick = {this.handler}>          Change State        </button>      </div>    );  }}render(<App />, document.getElementById('root'));可以说我想更改this.state.some.za的值，尽管我最初是this.setState({    some:{      z:{        a:1111      }    }}但是事实证明，返回给我的状态是{  "name": "React",  "some": {    "z": {      "a": 1111    }  }}因此，要获得预期的输出，我需要编写this.setState({    some:{      ...this.state.some,      z:{        ...this.state.some.z,        a:1111      }    }  }所以我的问题是，这是正确/推荐的做事方式还是我错过了什么。如果这是正确的方法，则setState的性能是否不依赖于Spread Operator（...）？

Answer 1

there are two ways to do it 

1. copy the object into some:

    handler = () => {

        let some = Object.assign({}, this.state.some);

        some.z.a = 1111;

        this.setState({ some }, () => {

          console.log(this.state);

        });

      };

will give an output:

    {

    name: "React"

    some: Object

    name: "axys"

    a: Array[5]

    z: Object

    a: 1111

    b: 5

    c: 6}

2. using the spead oprator

    handler = () => {

        let some = { ...this.state.some };

        console.log(some)

        this.setState(

          prevstate => ({

            some: {

             z:{ ...prevstate.some.z,

              a: 1111}

            }

          }),

          () => {

            console.log(this.state);

          }

        );

      };

with solution:

    {name: "React"

    some: Object

    z: Object

    a: 1111

    b: 5

    c: 6}

hope it will help