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

Answer 2

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

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

ReactJS：使用if的setState

2 个答案: