Question

我想知道，这是在ReactJS中设置对象状态的正确方法。

请找到我的示例代码：

class MyComponent extends Component {
  constructor(props) {
    this.updateName = this.updateName.bind(this);
    this.state = {
      name: "Sample code"
    };
  }
  updateName() {
    this.setState(name: "Updated");
  }
  componentDidMount() {
    this.updateName();
  }
  render() {
    return (
      <div>
        <label>{this.state.name}</label>
      </div>
    );
  }
}

这是我用来更新名称的示例代码。在这里，名称使用setState更新，并导致输出“ Updated”。

如果将updateName()改写为，

updateName(){
  this.state.name = 'Updated';
}

，然后打印名称，结果相同。我想知道，在ReactJS中设置对象状态的正确方法

Answer 1

您不应通过为this.state.name分配新值来直接改变状态对象。您应该使用setState方法，并为其提供一个应更新状态的对象。

class MyComponent extends Component {
  constructor(props) {
    this.updateName = this.updateName.bind(this);
    this.state = {
      name: "Sample code"
    };
  }

  componentDidMount() {
    this.updateName();
  }

  updateName() {
    this.setState({ name: "Updated" });
  }

  render() {
    return (
      <div>
        <label>{this.state.name}</label>
      </div>
    );
  }
}

Answer 2

正确的状态更新方法是使用this.setState函数。

updateName() {
   this.setState(oldState, {...oldState, name: "new name"});
}

ref：https://reactjs.org/docs/state-and-lifecycle.html

如何在ReactJS中设置对象的状态？

2 个答案: