編集 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 を使用する以外に、これに対処する最善の方法は何ですか?