javascript - 在 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 的性能不依赖于扩展运算符（...）吗？

标签： javascriptreactjssetstate

Answer 1

正如其他人所提到的，有多种方法可以做你想做的事情。但是执行您提到的特定方式的正确prevState方法是使用，this.state因为它是不可靠的（因为它是异步的）。

这是一个工作示例：

this.setState((prevState, props) => ({
  some: {
    ...prevState.some,
    z: {
      ...prevState.some.z,
      a: 1111
    }
  }
}))

很好的解释：https ://teamtreehouse.com/community/react-docs-now-recommends-using-function-with-prevstate-inside-of-setstate