与来自 api rest 的数据反应时渲染图形时出错

Posted 2023-02-22

【中文标题】与来自 api rest 的数据反应时渲染图形时出错

【英文标题】：Error rendering graphics in react with data coming from api rest

【发布时间】：2020-06-28 02:27:45

【问题描述】：

我正在尝试使用来自 api rest 的数据来呈现图表，但它没有显示值。我试图检查 chartjs 文档，但找不到错误。有谁能够帮我？我正在使用 react、chart 和 axios。

import React,  useState  from "react";
import  Bar  from "react-chartjs-2";
import axios from "axios";

export default function ChartBar() 
  const [dados, setDados] = useState();

  async function consultApi() 
    let res = await axios.get(
      "https://private-afe609-testefront.apiary-mock.com/anual-result"
    );
    Object.values(res.data).map(item => setDados(item));

  
  console.log(dados);

  consultApi();

  return (
    <div>
      <Bar labels=[dados.label] data=[dados.value] />
    </div>
  );

【问题讨论】：

同样的问题每天都会被问数百次。您为什么不阅读现有答案？

【参考方案1】：

我认为你在这里遗漏了很多东西

检查图表 js 2 如何检索数据道具以及您如何处理 API 响应。

这行得通

在这里查看sandbox

import React,  useState  from "react";
import  Bar  from "react-chartjs-2";
import axios from "axios";

export default function App() 
  const [label, setLabel] = useState([]);
  const [data, setData] = useState([]);

  React.useEffect(() => 
    axios
      .get("https://private-afe609-testefront.apiary-mock.com/anual-result")
      .then(result => 
        setLabel(Object.keys(result.data).map(key => result.data[key].label));
        setData(Object.keys(result.data).map(key => result.data[key].value));
        console.log(data);
      );
  , []);

  return (
    <div>
      <Bar data=
        labels: label,
        datasets: [
          
            label: 'My First dataset',
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            borderWidth: 1,
            hoverBackgroundColor: 'rgba(255,99,132,0.4)',
            hoverBorderColor: 'rgba(255,99,132,1)',
            data: data
          
        ]
       />
    </div>
  );



const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

【讨论】：

嗯，对不起，这是一个工作代码，为什么它被否决了？反对者的负面程度是不合理的

非常感谢我的朋友。它帮助很大。在此基础上，您将制作其他图形。