找不到 Amchart HTML 容器（反应）

Question

编辑 1（初始）：似乎 setState() 回调没有按我预期的方式工作。例如：

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

将注销 'true'，而我希望它注销 false。

编辑 2：我认为我处理下拉请求的方式有问题，这可能会导致我的大部分问题。所以我将其标记为已解决，因为 Dileep 的解决方案应该有效。我将在几个小时内更新我的结果。

编辑 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>
 )}

当我select下拉时，我被告知条形图是假的，然后在出现以下错误后为真：

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

因为 setState() 通常不会立即更新。我尝试通过在 setState() 回调函数中包含 loadBarChart() 代码来解决这个问题，但我得到了与以前相同的错误。所以我几乎可以肯定正在发生的是 am4core.create() 在呈现该元素之前正在寻找具有 id "barChartDiv" 的元素，所以我得到一个 html container not found 错误.

除了使用 css 之外，处理此问题的最佳方法是什么？

Answer 1

下面的代码是您的逻辑示例片段，在回调函数中您将能够获取元素。

请检查解决方案，让我知道您是否遇到任何问题或解决了问题。

注意 - 示例代码，但我希望它的逻辑相同。打开控制台并执行代码。

import React, { Component } from 'react';
import './App.css';


class App extends Component {

  state = {
    countrySelected: null
  }


  onCountryChange = (e) => {
    this.setState({
      countrySelected: e.target.value
    }, () => {
        // getting the id
        let id = document.getElementById("barChartDiv");
        console.log("id =>", id)
      })

  }




  render() {
    return (
      <div>
        <select onChange={this.onCountryChange}>
          <option value="India">India</option>
          <option value="USA">USA</option>
        </select>
        {
          this.state.countrySelected === "India" ?
            <div id="barChartDiv" style={{ width: "100%", height: "500px" }} />
            :
            null
        }
      </div>
    );
  }
}



export default App;

Answer 2

我在普通 HTML/JS 中遇到了这个错误。

出错时，我在 <div id="chartdiv"></div>

之前添加了 <script> 部分

解决方案 是将 <script> 部分放在 <div id="chartdiv"></div>

之后

写在这里是为了帮助可能运行自己参与其中的任何人。

找不到 Amchart HTML 容器（反应）

Amchart HTML container not found (React)

html

javascript

charts

reactjs

conditional-rendering