ReactJS：使用 if else [重复]答案

【问题标题】：ReactJS: setState using if else [duplicate]ReactJS：使用 if else [重复]
【发布时间】：2019-04-20 08:07:18
【问题描述】：

我是 ReactJS 的新手。在我的索引页面上，loginState 和 modalStatus 的初始状态为 false。我正在尝试在 componentDidMount() 中将 modalStatus 更改为 true。

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true,
      modalStatus: false,
    };
  }

  componentDidMount() {
    if(this.state.isLoggedIn) {
      console.log(this.state.modalStatus);
      this.setState({ modalStatus: true});
      console.log(this.state.modalStatus);
    }  else {
        console.log(this.state.modalStatus);
    }
  render() {
    return (
      <>
       <h1>Hello</h1>
      </>
    );
  }
}

但即使在 setState 之后，我的控制台也会为两个 modalStatus 打印 false。有什么我做错了吗？请指导我。如有任何帮助，我将不胜感激。

【问题讨论】：

好像没有关闭componentDidMount()，在if-else块后加一个}
this.setState({ modalStatus: true}, console.log(this.state.modalStatus)) 将 console.log 正确的值。也仅供参考，如果 else 不是循环
mybad :( 我会更新问题

标签： reactjs

【解决方案1】：

SetState 是异步的，因此当您执行 setState 时，修改值不会立即可用。为了查看更新的状态值

改变

  componentDidMount() {
if(this.state.isLoggedIn) {
  console.log(this.state.modalStatus);
  this.setState({ modalStatus: true});
  console.log(this.state.modalStatus);
}  else {
    console.log(this.state.modalStatus);
}
}

到

 componentDidMount() {
if(this.state.isLoggedIn) {
  console.log(this.state.modalStatus);
  this.setState({ modalStatus: true}, () => {
       console.log(this.state.modalStatus);
  });
}  else {
    console.log(this.state.modalStatus);
}
}

【讨论】：

【解决方案2】：

通过setState() 所做的更改不会立即反映。它是一个异步函数。尝试将其记录在 render() 中，您可以看到新值。

注意：您不应将 console.log() 留在渲染函数中，因为它会影响性能

【讨论】：