ReactJS:使用 if else 设置状态

Question

我是 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。我做错了什么吗？请指导我。如果有任何帮助，我将不胜感激。

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