this.Setstate在reactJS中无法正常工作

如何解决this.Setstate在reactJS中无法正常工作

我是新来的。

我处于这种状态：

     state = {
    isLoading: true,};

我有这个生命周期功能

 componentDidMount() {
    const { setPageCount,receiveApiData } = this.props.actions;
    const { isLoading } = this.state;
    const getData = () => {
      this.setState({ isLoading: !isLoading });
      receiveApiData();
      setPageCount();
    };
    setInterval(() => {
      getData();
    },30000);
  }

这是我要在render（）中返回的内容：

 return isLoading ? (
  <Loading></Loading>
) : ( `Some Code here`)

问题是状态始终为true，并且我的生命周期方法未将其更改为false，因此我的应用程序无法呈现错误条件。 我不知道该怎么办，有什么建议吗？

getData()中的所有其他东西都正常工作

解决方法

问题在这里：

this.setState({ isLoading: !isLoading });

因为isLoading所要解构的东西采用了先前的值，即它没有采用最新的状态值，因此不会更新您的isLoading。您需要做的是这样

this.setState({ isLoading: !this.state.isLoading });

以下是演示：https://codesandbox.io/s/interesting-chandrasekhar-pluv7?file=/src/App.js:312-332

,

由于新状态取决于旧状态的值，因此应使用setState的功能形式

this.setState(prevState => ({
  isLoading: !prevState.isLoading
}));

官方文档：https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous