在React.js中的狀態

Question

我是React.js的新手。 我有下面的代碼，其中變量modalOpen值未更改。

constructor(props) {
    super(props);

    this.state = {
      modalOpen: false,
    };

    this.view = this.view.bind(this);
}
view() {
    this.setState({ modalOpen: true });

    alert(this.state.modalOpen)
}
render() {
    return (
        <button className="mini ui button" onClick={this.view}>
            <i className="user icon"></i>
            View
        </button>
    )
}

如何更改值？

Answer 1

您的代碼是正確的，您可能需要將alert放在setState回調中或在render

  constructor(props) {
    super(props);

    this.state = {
      modalOpen: false,
    };

    this.view = this.view.bind(this);
  }
  view() {
    this.setState({ modalOpen: true }, ()=>{
      alert(this.state.modalOpen)
    });

  }
  render() {
    return (
      <div>
      <button className="mini ui button" onClick={this.view}>
        <i className="user icon"></i>
        View
        </button>
      {this.state.modalOpen ? 'true' : 'false'}
        </div>
    )
  }
}

Answer 2

來自React Docs ：

將setState（）視為請求而不是立即更新組件的命令。 為了獲得更好的感知性能，React可能會延遲它，然后在一次通過中更新幾個組件。 React不保證狀態更改會立即應用。

setState(updater, callback)

答：如果要對prev狀態做些事情，最好將一個函數作為更新程序傳遞給setState 。

this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

B.對於您的情況，在更新狀態並要調用回調函數之后，將需要setState的callback ，例如：

view() {
  this.setState({
    modalOpen: true
  }, () => {
    alert(this.state.modalOpen)
  });
}

Answer 3

因為setState是異步的。之所以這樣做是為了提高性能。 就像在window.resize事件中添加偵聽器時，您不希望每次發出resize事件時都調用該偵聽器。