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

Question

我正在尝试使用来自 api rest 的数据来呈现图表，但它没有显示值。我试图检查 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 响应。

这会奏效

在这里检查沙箱

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

);