ReactJS:setState使用if-else[重复]

Question

我是新来的ReactJS。在我的索引页上，loginState的初始状态

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

但是我的控制台在设置状态之后，两个modalStatus都打印为false。我做错什么了吗？请引导我。如果有任何帮助，我将不胜感激。

Answer 1

通过setState（）进行的更改不会立即反映出来。它是一个异步函数。尝试将其记录在render（）中，您可以看到新值。

注意：您不应该将console.log（）留在render函数中，因为它会影响性能

Answer 2

SetState是异步的，因此在执行SetState时，modifies值不会立即可用。以查看更新的状态值

改变

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