如何使用React-Chartjs-2在ReactJ中的线图类中中的asspific API调用

Question

我正在ReactJ中创建一个Web应用程序，我正在尝试从图表类中调用API。

我有一个程序，该程序从ML模型中获取数据，并以数组的形式将其写入API。我很不熟悉使用ReactJS，我只想打电话给API将数组返回我的数据变量中的react在屏幕上的渲染中。

API中的数据格式为..[1，2，，3，4]

当前，我将数据硬编码为单独的文件并导入该数据，但是我希望直接从API调用它，以便它更新。

import React, {Component} from "react"
import {Line} from "react-chartjs-2"
import {popuData, dayLabels} from "./FakeGraphData";
class PlanGraph extends Component{
    constructor(props){
        super(props);
        this.state = {
            chartData:{
                labels: dayLabels,
                datasets: [
                    {
                        label:'Predicted Park Crowds',
                        data: popuData,
                        borderColor: 'rgba(77, 112, 255, 1)',
                        backgroundColor: 'rgba(77, 112, 255, 1)'
                    }
                ]
            }
        }
    }
    render(){
        return(
            <div className = "chart">
                <Line
                    data={this.state.chartData}
                    options={{
                        title: {
                            display:true,
                            text:"Predicted Park Crowds",
                            fontSize:25
                        },
                        legend:{
                            display: true,
                            position: 'right'
                        },
                        scales: {
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Anticipated Crowds'
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                scaleLabel: {
                                    display:true,
                                    labelString: 'Days in the future'
                                }
                            }]
                        }
                    }}
                />
            </div>
        )
    }
}
export default PlanGraph

Answer 1

添加容器组件＆amp;使用道具

您在这里向我们展示的组件看起来像是一个呈现组件(具有HTML结构，关心事物的外观(。您应该做的是创建一个容器组件，这些组件都在关心逻辑＆amp;获取数据。您可以在此处阅读有关此设计方法的信息。

容器将渲染您上面发布的组件，但会通过一些这样的道具。

示例

class PlanGraphContainer extends Component {
  state = {
    dataToPass: []
  };
  async componentDidMount() {
    const response = await fetch('https://your-api-request');
    const data = await response.json(); // maybe you need this, you have to check your response
    this.setState({dataToPass: data});
  }
  render() {
    return <PlanGraph data={this.state.dataToPass} />
  }
}

然后在您的plangraph内部使用this.props.data查看正在传递的数据。在等待请求完成时，请确保您有一些虚假的数据或加载状态。我们可以添加类似的东西

render() {
  const { dataToPass } = this.state;
  return (dataToPass && dataToPass.length)
    ? <PlanGraph data={this.state.dataToPass} />
    : null;
}