Ошибка рендеринга графики при реагировании на данные, поступающие от остальных API - PullRequest
Новая
       23

Ошибка рендеринга графики при реагировании на данные, поступающие от остальных API

0 голосов
/ 17 марта 2020

Я пытаюсь визуализировать график с данными из остальных API, но он не показывает значения. Я попытался проверить документацию по таблице js и не могу найти ошибку. Кто-нибудь может мне помочь? Я использую реаги, чарт и топор ios. 

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 Ответ

0 голосов
/ 17 марта 2020

Я думаю, вам здесь не хватает многих вещей

Проверьте, как на диаграмме 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
);
...