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

Question

我正在尝试使用来自 api 休息的数据渲染图表，但它没有显示值。我试图检查 chartjs 文档，但找不到错误。有谁能够帮我？我正在使用反应、图表和 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>
  );
}

Answer 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
);

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

Error rendering graphics in react with data coming from api rest

javascript

reactjs

charts

axios

react-chartjs