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中。对于您的情况，在更新状态并想要调用回调函数后，您需要callback setState，例如：

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

Answer 3

因为setState是异步的。反应的原因是为了提高性能。就像向window.resize事件添加侦听器一样，每次调度resize事件时都不希望调用侦听器。

在React.js中的状态

3 个答案: