Как смонтировать компонент chartjs с помощью http-вызова? - PullRequest
Новая
       21

Как смонтировать компонент chartjs с помощью http-вызова?

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

Я работаю с реакцией и использую реагирующую диаграмму для монтирования графика из информации JSON.Я могу получать данные из JSON онлайн и сортировать их по данным, которые нужны с помощью метода карты.Но данные, которые мне нужны от componentDidMount (), не передаются методу рендеринга.Я попытался console.log, чтобы проверить данные на разных этапах.

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

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





 class DoughnutExample extends Component {
 state = {}
 async componentDidMount() {
    this.setState({users: [ ]})
    const { data: users } = await axios.get(
      "https://api.myjson.com/bins/bw0u4"
    );
    this.setState({ users: users.map(({ chart }) => chart) });
    console.log( users)
  }
 render() {
  console.log(this.state.users)

  return (
  <div className="card card-1" style={{ padding: "10px" }}>
    <h3 style={headingStyle}>Cash Flow</h3>
    <Doughnut data={this.state.users} />

   </div>
  );
  }
  }

  export default DoughnutExample;

Мой файл JSON: http://myjson.com/bw0u4

1 Ответ

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

users необходимо инициализировать как начальное состояние: 

state = {
    users: {}
}

И учитывая предоставленную структуру данных и ожидаемую структуру данных для типа кольцевой диаграммы, data prop можно инициализировать так: 

const { data } = await axios.get(
  "https://api.myjson.com/bins/bw0u4"
);

const users = {
    datasets : [{
        data : data.map(({chart}) => chart)
    }]
}
this.setState({ users });

, где 

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

Демо

...