Javascript 在Chart.JS+；反应

我在动态设置[数据集]中的[数据]时遇到问题。我的代码从api接收数据并相应地设置状态。我已经记录了

头像、杀戮、放炮、放炮、狙击手杀戮

状态，结果类似于

[123456789,2,1]

。当我像在代码片段中那样替换变量时，它不起作用。但是，当我硬核一个值，如30，它的工作！是否有一种方法可以使用reacts state将数据传递到图形？我想从一个返回数据的API中提取数据，这使得这个图表是动态的。我真的卡住了，请帮帮我(

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“react router dom”导入{useParams}；
从“react-chartjs-2”导入{Bar}；
常量条形图=（）=>{
const selected=useParams（）；
const[loaded，setLoaded]=useState（false）；
const[headshots，setHeadshots]=useState（“”）；
const[kills，setKills]=useState（“”）；
const[shotshit，setShotshit]=useState（“”）；
const[shotsfired，setShotsfired]=useState（“”）；
const[sniperskill，setsniperskill]=useState（“”）；
useffect（（）=>{
axios
.得到(`http://localhost:4040/profile/${selected.platform}/${selected.id}`）
。然后（（res）=>{
如果（已加载===false）{
//条形图
setHeadshots（res.data.segments[0].stats.headshots.displayValue）；
setKills（res.data.segments[0].stats.kills.displayValue）；
setShotshit（res.data.segments[0].stats.shotsHit.displayValue）；
setShotsfired（res.data.segments[0].stats.shotsFired.displayValue）；
刺杀(
res.data.segments[0].stats.sniperskill.displayValue
);
setLoaded（真）；
}
})
.catch（（错误）=>{
console.log（错误）；
});
}, []);
常数数据={
标签：[
“头像”，
“杀人”，
“射门命中”，
“开枪”，
“狙击手被杀”，
],
数据集：[
{
标签：“玩家统计”，
数据：[“30”，杀人，放屁，放火，狙击手杀人]，
背景颜色：[
"rgba(255,99,132,0.6),，
“rgba（54162235,0.6）”，
“rgba（255、206、86、0.6）”，
“rgba（751921920.6）”，
“rgba（153102255,0.6）”，
],
},
],
};
如果（已加载===false）{
返回装载；
}否则{
返回(
);
}
};
导出默认条形图；

数据集中的数据必须统一。例如，所有数据都必须是数字。但有一个例外是可能的，即null和未定义。因为您正在等待解决axios调用，并且此过程是异步的，所以您的数据列表将为空

一种解决方案是在axios响应中实现数据，并设置数据状态并在其中进行更改：

const条形图=（）=>{
const selected=useParams（）；
const[data，setData]=useState（{labels:[]，dataset:[]}）；
const[loaded，setLoaded]=useState（false）；
useffect（（）=>{
axios
.得到(`http://localhost:4040/profile/${selected.platform}/${selected.id}`）
。然后（res=>{
如果（已加载===false）{
//条形图
常数数据={
标签：[
“头像”，
“杀人”，
“枪响”，
"开枪",，
“狙击手被杀”，
],
数据集：[
{
标签：'玩家统计'，
数据：[
res.data.segments[0].stats.headshots.displayValue，
res.data.segments[0].stats.kills.displayValue，
res.data.segments[0].stats.shotsHit.displayValue，
res.data.segments[0].stats.shotsFired.displayValue，
res.data.segments[0].stats.sniperskill.displayValue，
],
背景颜色：[
"rgba(255,99,132,0.6)",，
"rgba(54162235,0.6)",，
"rgba(255,206,86,0.6)",，
"rgba(751921920.6)",，
“rgba（153102255,0.6）”，
],
},
],
};
setLoaded（真）；
setData（数据）；
}
})
.catch（错误=>{
console.log（错误）；
});
}, []);
如果（已加载===false）{
返回装载；
}否则{
返回(
{数据&&(
)}
);
}
};
导出默认条形图；

非常感谢Ehsan！这很有帮助。

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router-dom";
import { Bar } from "react-chartjs-2";
const BarChart = () => {
  const selected = useParams();
  const [loaded, setLoaded] = useState(false);
  const [headshots, setHeadshots] = useState("");
  const [kills, setKills] = useState("");
  const [shotshit, setShotshit] = useState("");
  const [shotsfired, setShotsfired] = useState("");
  const [sniperskilled, setSniperskilled] = useState("");
  useEffect(() => {
    axios
      .get(`http://localhost:4040/profile/${selected.platform}/${selected.id}`)
      .then((res) => {
        if (loaded === false) {
          //Bar Graph
          setHeadshots(res.data.segments[0].stats.headshots.displayValue);
          setKills(res.data.segments[0].stats.kills.displayValue);
          setShotshit(res.data.segments[0].stats.shotsHit.displayValue);
          setShotsfired(res.data.segments[0].stats.shotsFired.displayValue);
          setSniperskilled(
            res.data.segments[0].stats.snipersKilled.displayValue
          );
          setLoaded(true);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  const data = {
    labels: [
      "Headshots",
      "Kills",
      "Shots Hit",
      "Shots Fired",
      "Snipers Killed",
    ],
    datasets: [
      {
        label: "Player Statistics",
        data: ["30", kills, shotshit, shotsfired, sniperskilled],
        backgroundColor: [
          "rgba(255, 99, 132, 0.6)",
          "rgba(54, 162, 235, 0.6)",
          "rgba(255, 206, 86, 0.6)",
          "rgba(75, 192, 192, 0.6)",
          "rgba(153, 102, 255, 0.6)",
        ],
      },
    ],
  };
  if (loaded === false) {
    return loaded;
  } else {
    return (
      <div className="chart">
        <Bar
          redraw
          data={data}
          width={350}
          height={350}
          options={{
            maintainAspectRatio: true,
          }}
        />
      </div>
    );
  }
};

export default BarChart;