Добавьте Axios к графику React и получите данные JSON - PullRequest
Новая
       7

Добавьте Axios к графику React и получите данные JSON

0 голосов
/ 05 февраля 2019

Я в настоящее время практикую React и привыкаю к ​​диаграммам.

Мне было тяжело, когда я использовал диаграмму React и вызывал Axios для получения информации из онлайн-файла JSON.

Он отлично работает спредварительно запрограммированные значения, но при вызове с использованием Axios это не дает результата.

У меня есть сомнения относительно того, как правильно применить Axios к существующему коду!Любая помощь очень ценится. 

 import React, { Component } from "react";
 import { Doughnut } from "react-chartjs-2";
 import axios from "axios";

 const headingStyle = {
  "text-align": "center"
  };

  const data = {
  labels: ["In", "out", "Balance"],
 datasets: [
 {
 //   data: [300, 100, 200],
  backgroundColor: ["#27DD73", "#FF2400", "#36A2EB"],
  hoverBackgroundColor: ["#27DD73", "#FF2400", "#36A2EB"]
  }
    ]
  };



 class DoughnutExample extends Component {
 async componentDidMount() {
    const { data: users } = await axios.get(
      "https://api.myjson.com/bins/bw0u4"
    );
    this.setState({ users });
  }
 render() {
 return (
  <div className="card card-1" style={{ padding: "10px" }}>
    <h3 style={headingStyle}>Cash Flow</h3>
    <Doughnut data={data} />
  </div>
 );
   }
 }

export default DoughnutExample;

Мой файл JSON находится здесь: https://api.myjson.com/bins/bw0u4

Я хочу взять данные "диаграммы" из JSON.

1 Ответ

0 голосов
/ 05 февраля 2019

В render нет переменной data.Поскольку ответ хранится в состоянии, его следует использовать соответственно: 

<Doughnut data={this.state.users} />

Если предполагается получить ключ chart из элементов массива, массив должен быть переназначен: 

this.setState({ users: users.map(({ chart }) => chart) });

Кроме того, с этим фрагментом проблем нет .

...