Javascript 为什么 SetState 未在 componentDidMount 上执行

发布于08月09日

我想更新ComponentDidmount中的状态，但setState函数没有执行

ComponentDidMount() {
    if (this.props.location.search.includes("?token")) {
      const email = getQueryVariable(this.props.location.search, "email");
      const token = getQueryVariable(this.props.location.search, "token");
      if (this.state.showValidationModal === false) {
        console.log("Before",this.state.showValidationModal);
        this.setState({
          showValidationModal:true
        })
        console.log("After",this.state.showValidationModal);

      }
    }
  }

当应用程序挂载时，两个showValidationModal日志(log)的结果都是false

推荐答案

setState是一个异步操作，它不会立即更新状态，但setState回调具有来自该状态的最后一个实例值，因此.

ComponentDidMount() {
if (this.props.location.search.includes("?token")) {
  const email = getQueryVariable(this.props.location.search, "email");
  const token = getQueryVariable(this.props.location.search, "token");
  if (this.state.showValidationModal === false) {
    console.log("Before",this.state.showValidationModal);
    this.setState({
      showValidationModal:true
    })
    // here you get the latest value of showValidationModal state
    this.setState(prevState => console.log(prevState.showValidationModal))

    // here you get the old value.
    console.log("After",this.state.showValidationModal);

  }
}
}