javascript - Amchart HTML コンテナーが見つかりません (React)

Question

編集 1 (初期): setState() コールバックが期待どおりに機能していないようです。例えば：

this.state = {table: true}
this.setState({table: false}, ()=> console.log(this.state.table)); 

falseでログアウトすると予想される場合、「true」でログアウトします。

編集 2: ドロップダウン リクエストの処理方法に問題があり、それが問題の大部分を引き起こしている可能性があると思います。ディリープのソリューションが機能するはずなので、これを解決済みとしてマークします。数時間後に結果を更新します。

編集 3(最終): 複数のケースをトリガーして状態をリセットする switch() ステートメントを使用していました。

問題が何であるかを理解していると思いますが、それを解決する方法が完全にはわかりません。

Amchart の create("elementID", chartType) 関数で要素にアクセスできるようになる前に、要素を条件付きでレンダリングしたいと考えています。次の関数を呼び出して、ドロップダウンでレンダリングしたいと考えています。

loadBarChart() {
this.setState({ piechart: false, table: false, barchart: true });
var chart = am4core.create("barChartDiv", am4charts.XYChart);
chart.data = this.state.data;

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "schoolname";
categoryAxis.title.text = "Schools";

let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "Number of Students";
}

そして、barChartDiv は次のように表示されます。

 {this.state.barchart && (
      <section>
        <h1 style={{ textAlign: "center" }}>School Data</h1>
        <div id="barChartDiv" style={{ width: "100%", height: "500px" }} />
      </section>
 )}

ドロップダウンを選択すると、棒グラフが false であり、次のエラーの後に true であると表示されます。

Instance.js:128 Uncaught Error: html container not found

setState() はすぐに更新されないことが多いためです。setState() コールバック関数に loadBarChart() コードを含めることでこれを回避しようとしましたが、以前と同じエラーが発生します。したがって、am4core.create() は要素がレンダリングされる前に ID「barChartDiv」を持つ要素を探しているため、html コンテナーが見つからないというエラーが発生することがほぼ確実です。

css を使用する以外に、これに対処する最善の方法は何ですか?