HTML-контейнер Amchart не найден (React) - PullRequest
Новая
       17

HTML-контейнер Amchart не найден (React)

0 голосов
/ 12 декабря 2018

EDIT 1 (начальная): кажется, что обратный вызов setState () работает не так, как я ожидал.Например: 

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

Выйдет из системы 'true', когда я ожидаю, что она выйдет из режима false.

РЕДАКТИРОВАТЬ 2: Я считаю, что что-то не так с тем, как яобработка моих выпадающих запросов, и это может быть причиной большинства моих проблем.Так что я собираюсь отметить это как решенное, потому что решение Дилипа должно работать.Я обновлю это через пару часов с моим результатом.

EDIT 3 (Final): я использовал оператор 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>
 )}

Когда я выбираю выпадающий список, мне говорят, что barchartfalse, а затем true после следующей ошибки: 

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

Поскольку setState () часто не обновляется немедленно.Я попытался обойти это путем включения кода loadBarChart () в функцию обратного вызова setState (), но я получаю те же ошибки, что и раньше.Так что я почти уверен, что происходит, что am4core.create () ищет элемент с идентификатором "barChartDiv" до того, как этот элемент рендерится, и поэтому я получаю ошибку html container not found.

Как лучше всего с этим справляться, если не использовать css?

Ответы [ 2 ]

0 голосов
/ 11 января 2019

Я получил эту ошибку в простом HTML / JS.

На момент ошибки я добавил раздел <script> перед моим <div id="chartdiv"></div>

разрешением должен был поместить секцию <script> после <div id="chartdiv"></div>

, чтобы написать это здесь, чтобы помочь любому, кто может столкнуться с этим самим.

0 голосов
/ 12 декабря 2018

Приведенный ниже код представляет собой пример кода вашей логики, в функции обратного вызова вы сможете получить элемент.

Пожалуйста, проверьте решение и дайте мне знать, сталкивались ли вы с какой-либо проблемой или она решенаэто.

Примечание - пример кода, но логика, я надеюсь, такая же.Откройте консоль и выполните код. 

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;
...