Javascript 使用来自api rest的数据在react中渲染图形时出错

我试图用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>
  );
}

import React，{useState}来自“React”；
从“react-chartjs-2”导入{Bar}；
从“axios”导入axios；
导出默认函数ChartBar（）{
const[dados，setDados]=useState（{}）；
异步函数consultApi（）{
让res=等待axios.get(
"https://private-afe609-testefront.apiary-mock.com/anual-result"
);
Object.values（res.data）.map（item=>setDados（item））；
}
控制台日志（dados）；
领事（）；
返回(
);
}

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

检查chart js 2如何检索数据道具以及如何处理API响应

这会有用的

在这里查看

import React，{useState}来自“React”；
从“react-chartjs-2”导入{Bar}；
从“axios”导入axios；
导出默认函数App（）{
const[label，setLabel]=useState（[]）；
const[data，setData]=useState（[]）；
React.useffect（（）=>{
axios
.get（“https://private-afe609-testefront.apiary-mock.com/anual-result")
。然后（结果=>{
setLabel（Object.keys（result.data）.map（key=>result.data[key].label））；
setData（Object.keys（result.data）.map（key=>result.data[key].value））；
控制台日志（数据）；
});
}, []);
返回(
);
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(
,
根元素
);