Javascript 如何在React&；中正确更新图表；使用API数据的Chart.js应用程序

我正在接收来自API的数据，我想获取这些数据并将其填充到我的图表中。我可以看到API数据在哪里被调用，并被传递到setState，但我似乎无法正确地获取这些数据并将其传递到我的图表

我尝试过对Chart.js使用destroy（）和update（）方法，但都没有效果。我确信这只是我没有在我的应用程序中正确使用它们的问题。下面的代码不包括这些方法，因为我不确定在哪里使用它们。我还尝试将API数据推送到图表的数据数组中，但没有成功

componentDidMount() {
// create chart 
          new Chart(myChartRef, {
      type: "line",
      data: {
        labels: ["Jan", "Feb", "March"],
        datasets: [
          {
            data: this.state.chartData,
            backgroundColor: gradient,
            pointBackgroundColor: "#fff",
            pointBorderColor: gradient,
            pointRadius: "5",
            hoverBackgroundColor: "#75C6FF",
            hoverBorderColor: gradient
          }
        ]
      },
      options: {
        responsive: true,
        legend: {
          display: false
        },
        scales: {
          xAxes: [
            {
              gridLines: {
                color: "#535356"
              },
              ticks: {
                fontColor: "#87889C"
              }
            }
          ],
          yAxes: [
            {
              gridLines: {
                color: "#535356"
              },
              ticks: {
                fontColor: "#87889C"
              }
            }
          ]
        }
      }
    });
/* fetch API data and use it to set app state (setState) */
    const getChartData = () => {
      fetch(
        "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH&tsyms=USD"
      )
        .then(response => {
          return response.json();
        })
        .then(myJson => {
          const bitcoinPrice = myJson.BTC.USD;
          this.setState({ chartData: bitcoinPrice });
          console.log(JSON.stringify(myJson));
        });
    };

    getChartData();
}

在代码中，我在安装组件后创建了一个新图表。然后我调用API并接收我想要在图表上显示的数据。我可以在React-dev工具中看到，我的应用程序正在设置状态，但图表不会更新。我假设我需要做一些事情，比如将API数据映射到图表中的数据数组中，但我不确定如何正确地做到这一点，而且我还没有找到SO或其他在线建议的其他解决方案

---

这是我的第一个React应用程序，所以我不确定我在React或Chart.js中是否做错了什么？

根据我的经验，可以将图表组件和图表容器分开。在图表容器中进行提取，并将提取的数据作为道具传递给图表组件，以便更好地组织代码

此外，您还需要检查是否使用组件更改了道具将在图表组件内部接收道具生命周期方法，并相应地更新图表

创建一个名为ChartContainer.js的组件，并将chartData作为道具传递给ChartComponent

import React，{Component}来自'React'；
从“./ChartComponent”导入ChartComponent
导出类ChartContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图表数据：[]
}
componentDidMount（）{
取回(
"https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC，ETH&tsyms=美元“
)
。然后（响应=>{
返回response.json（）；
})
。然后（myJson=>{
const bitcoinPrice=myJson.BTC.USD；
this.setState（{chartData:bitcoinPrice}）；
log（JSON.stringify（myJson））；
});
}
render（）{
const{chartData}=this.state；
返回(
);
}
}

创建一个名为ChartComponent的组件，并将chartData作为道具获取。同时创建一个名为chart的状态，并将图表设置为状态，并使用componentWillReceiveProps lifecycle更新图表以更新图表

import React，{Component}来自'React'；
导出类ChartComponent扩展组件{
建造师（道具）{
超级（道具）
this.state={chart:null}
}
chart=React.createRef（）；
componentDidMount（）{
//将chartData作为this.props.chartData传递到下面的图表
让图表=新图表（…）
//将图表设置为状态
this.setState（{chart:theChart}）
}
组件将接收道具（nextProps、nextContext）{
//根据道具变化更新图表
this.state.chart.data.datasets.forEach（（数据集）=>{
dataset.data.push（nextrops.chartData）；
});
this.state.chart.update（）；
}
render（）{
返回(
);
}
};

好的，我按照您的建议将部分代码分成了两个文件。虽然这确实让事情更容易阅读和理解，但我仍然无法更新图表。我应该使用map（）吗方法来迭代API数据并将其传递到chartData数组中？我已经看到了这一点，但我不确定如何正确实现它。每次道具更改时，组件都应该使用新道具重新渲染，但无论如何，它都应该使用状态更改重新渲染，但我以前使用过这种方式。但是，如果它没有解决问题，那么我想我可以调用chart.update（）；在ChartComponent的componentDidMount MethodHMMM中当我最初尝试时，我得到一个错误，说“chart.update不是一个函数”，起初我认为我必须使用这个.chart.update（），而不仅仅是chart.update（），但无论哪种方式，我都会得到相同的错误。实际上，你可以保留新的chart（）在引用它的状态变量内部，然后可以调用此.myChartVar.update（）？是的！非常感谢，这正是我所需要的。我知道有某种方法可以将API响应传递给图表，但我无法找到它。将此标记为答案：）