Question

  constructor(props) {

    super(props);
    this.state = {
      active: false,
      showSideBar: false,
      className: ""
    }
  }
  componentDidMount() {
    if (this.props.overlay) {
      this.setState({
        className: "wrapper_overlay"
      });
      alert(this.state.className);
    }
    else if (this.props.SideBarWithIcon) {
      this.setState({
        className: "wrapper_clopsed"
      });
    }
  }

我正在使用道具来更新状态，但是组件正在获取道具，但是状态没有更新

Answer 1

setState是异步的。只需在该方法的回调中发出警报即可。

if (this.props.overlay) {
  this.setState(
    { className: "wrapper_overlay" },
    () => alert(this.state.className);
  );
}

注意：您可以并且也应该使用shouldComponentUpdate检查setState通话何时结束

Answer 2

由于setstate本质上是异步的，因此您可能不会在警报中看到更新的状态。您可以在setstate完成后调用的回调中使用它。像这样

componentDidMount() {
    if (this.props.overlay) {
      this.setState({
        className: "wrapper_overlay"
      }, ()=> {alert(this.state.className);});
   }

Answer 3

State updates may be asynchronous

React可以将多个setState（）调用批处理为单个更新，以用于   性能。

由于this.props和this.state可能会异步更新，因此您   不应依赖于它们的值来计算下一个状态。

// Wrong
this.setState({
    className: "wrapper_overlay"
  });

要解决此问题，请使用第二种形式的setState（）来接受函数而不是对象。

// Correct
this.setState((state, props) => ({
  className: "wrapper_overlay"
}));

或者只是

this.setState(() => ({
  className: "wrapper_overlay"
}));

Answer 4

在React.js中，正在运行的程序线程不会等待设置状态并继续执行，直到且除非在$Sp2Qquery = "EXEC AAA_Meeting_XG_boost"; $Sp2Result = sqlsrv_query($conn, $Sp2Qquery); $Row2 = sqlsrv_fetch_array($Sp2Result, SQLSRV_FETCH_ASSOC); print_r($Row2);die;回调中定义了操作。

您的状态正在设置，但是由于您的setState()在setstate之后，即不在alert()的回调中，这就是为什么它获得先前值的原因，因为在状态设置新值时，线程不等待而是执行下一条指令setState()。

alert()

希望这对您有用。

Answer 5

只需使用回调方法来更新状态，如 setState（）可能异步工作。

        this.setState(() => {
            className: "wrapper_clopsed"
        });

ReactJS状态不更新

5 个答案: