this.Setstate が ReactJS で正しく動作しない

React については初めてです。

この状態があります:

     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 に変更しないため、アプリが false 条件をレンダリングできないことです。 何をすればよいかわかりません。何か提案はありますか?

getData() 内の他のすべては正しく動作しています

問題はここにあります:

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

isLoading は以前の値を取得して構造化しているものであるため、つまり最新の状態値を取得していないため、isLoad は更新されませんいます。行う必要があるのは次のとおりです:

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