Question

我正在学习react，并且正在使用react，axios和chartjs创建应用程序。我想使用来自axios的数据来创建图表，但创建图表后会加载数据。更新图表时会发生相同的问题。

要创建图表，我使用的是document.getElementById('myChart').getContext('2d')，所以我迫不及待想要渲染完成数据加载。

在componentWillMount（）中，我正在使用getDataFromServer（）加载数据，因此我认为将使用这些数据来创建图表。

在componentDidMount（）中，我正在创建图表。

componentDidMount() {
    this.state.mainCtx = document.getElementById('myChart').getContext('2d');
    this.state.mainChart = new Chart(this.state.mainCtx, {
        type: 'line',
        data: {
            labels: this.state.tempsMonthLabels,
            datasets: [{
                label: "My First dataset",
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 35, 3],
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Custom Chart Title'
            }
        }
    });}


getDataFromServer(month) {
    axios.get('http://localhost:8080/avgTempsMonth/'.concat(month))
        .then(res => {
            const tempsMonth = res.data;
            this.setState({ tempsMonth });
            const tempsMonthLabels = []; 
            //
            ..converting data to tempsMonthLabels
            //
            this.setState({ tempsMonthLabels });
            this.setState({ isLoading: false });
        })
}

handleChange = event => {
    this.state.currentMonth = event;
    this.getMonthTempsFromServer(event); 
    this.state.mainChart.data.labels = this.state.tempsMonthLabels; 
    this.state.mainChart.update();
}

在创建图表之前我该如何加载数据？感谢avdice。

Answer 1

axios从服务器获取数据是异步功能。您永远不会知道何时接收数据。

所以您应该做的是，在从服务器接收到所有数据之后创建图表。

componentDidMount() {
    this.state.mainCtx = document.getElementById('myChart').getContext('2d');
    getDataFromServer(this.state.defaultMonth);//There should be a default value for initial load
}


getDataFromServer(month) {
    axios.get('http://localhost:8080/avgTempsMonth/'.concat(month))
      .then(res => {
          const tempsMonth = res.data;
          this.setState({ tempsMonth });
          const tempsMonthLabels = []; 
          //
          ..converting data to tempsMonthLabels
          //
          this.setState({ tempsMonthLabels });
          this.setState({ isLoading: false });

          //// Create Chart over here after you received all data

          let mainChart = new Chart(this.state.mainCtx, {
            type: 'line',
            data: {
                labels: this.state.tempsMonthLabels,
                datasets: [{
                    label: "My First dataset",
                    borderColor: 'rgb(255, 99, 132)',
                    data: [0, 10, 5, 2, 20, 30, 35, 3],
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Custom Chart Title'
                }
            }
          });
          this.setState({mainChart});
          ////
      })
}

handleChange = event => {
    this.state.currentMonth = event;
    this.getMonthTempsFromServer(event); 
    this.state.mainChart.data.labels = this.state.tempsMonthLabels; 
    this.state.mainChart.update();
}

ReactJS-使用Axios + chartjs加载数据

1 个答案: