第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

與來自 api rest 的數(shù)據(jù)反應時渲染圖形時出錯

與來自 api rest 的數(shù)據(jù)反應時渲染圖形時出錯

拉風的咖菲貓 2022-05-22 11:17:05
我正在嘗試使用來自 api rest 的數(shù)據(jù)來呈現(xiàn)圖表,但它沒有顯示值。我試圖檢查 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>  );}
查看完整描述

1 回答

?
慕沐林林

TA貢獻2016條經(jīng)驗 獲得超9個贊

我認為你在這里遺漏了很多東西

檢查圖表 js 2 如何檢索數(shù)據(jù)道具以及您如何處理 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

);


查看完整回答
反對 回復 2022-05-22
  • 1 回答
  • 0 關(guān)注
  • 89 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號