Reactjs 状态未更新答案

【问题标题】：Reactjs state not updatingReactjs 状态未更新
【发布时间】：2019-01-23 05:22:52
【问题描述】：

  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"
      });
    }
  }

我在 props 的帮助下更新我的状态，但是组件正在获取 props 但状态没有更新

【问题讨论】：

可以放弃构造函数，直接写state = {}。欲了解更多信息：hackernoon.com/…

标签： javascript reactjs

【解决方案1】：

setState 是异步的。只需在方法的回调中提醒即可。

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

注意：您可以也应该使用shouldComponentUpdate 来检查setState 调用何时完成

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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"
}));

【讨论】：

【解决方案4】：

在 React.js 中，正在运行的程序线程不会等待设置状态并继续执行，直到和除非在 setState() 回调中定义的操作。

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

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

希望这对你有用。

【讨论】：

【解决方案5】：

只需使用回调方法更新状态，如 setState() 可能会异步工作。

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

【讨论】：