Как сделать специальный вызов API из класса Line Chart в ReactJS с использованием response-chartjs-2? - PullRequest
Новая
       13

Как сделать специальный вызов API из класса Line Chart в ReactJS с использованием response-chartjs-2?

1 голос
/ 09 мая 2019

Я создаю веб-приложение в ReactJS и пытаюсь вызвать API из своего класса Chart.

У меня есть программа, которая берет данные из модели ML и записывает их в API в виде массива.Я новичок в использовании ReactJS, и я просто хочу вызвать API, чтобы вернуть массив в мою переменную данных в реакции на рендеринг на графике на экране.

Данные в API отформатированы как .. [1, 2, 3, 4]

В настоящее время у меня есть данные, жестко запрограммированные в отдельный файл, и я импортирую их, но я хочу ихвызываться из API напрямую, поэтому он обновляется. 

import React, {Component} from "react"
import {Line} from "react-chartjs-2"
import {popuData, dayLabels} from "./FakeGraphData";

class PlanGraph extends Component{
    constructor(props){
        super(props);
        this.state = {
            chartData:{
                labels: dayLabels,
                datasets: [
                    {
                        label:'Predicted Park Crowds',
                        data: popuData,
                        borderColor: 'rgba(77, 112, 255, 1)',
                        backgroundColor: 'rgba(77, 112, 255, 1)'
                    }
                ]
            }
        }
    }

    render(){
        return(
            <div className = "chart">
                <Line
                    data={this.state.chartData}
                    options={{
                        title: {
                            display:true,
                            text:"Predicted Park Crowds",
                            fontSize:25
                        },
                        legend:{
                            display: true,
                            position: 'right'
                        },
                        scales: {
                            yAxes: [{
                                scaleLabel: {
                                    display: true,
                                    labelString: 'Anticipated Crowds'
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }],
                            xAxes: [{
                                scaleLabel: {
                                    display:true,
                                    labelString: 'Days in the future'
                                }
                            }]

                        }
                    }}
                />
            </div>
        )
    }
}
export default PlanGraph

1 Ответ

0 голосов
/ 09 мая 2019

Добавить контейнер Компонент и использовать реквизит

Компонент, который вы показали нам здесь, выглядит как презентационный компонент (имеет html-структуру, заботится о том, как все выглядит). Что вы должны сделать, это создать компонент контейнера, эти компоненты заботятся о таких вещах, как логика и получение данных. Вы можете прочитать об этой методологии проектирования здесь .

Контейнер отрендерит компонент, который вы разместили выше, но пропустит некоторые реквизиты вроде этого.

Пример 

class PlanGraphContainer extends Component {
  state = {
    dataToPass: []
  };

  async componentDidMount() {
    const response = await fetch('https://your-api-request');
    const data = await response.json(); // maybe you need this, you have to check your response
    this.setState({dataToPass: data});
  }

  render() {
    return <PlanGraph data={this.state.dataToPass} />
  }
}

Затем внутри вашего PlanGraph используйте this.props.data, чтобы увидеть данные, которые передаются. убедитесь, что у вас есть поддельные данные или состояние загрузки, пока вы ждете завершения запроса. наши вы можете добавить что-то вроде этого 

render() {
  const { dataToPass } = this.state;
  return (dataToPass && dataToPass.length)
    ? <PlanGraph data={this.state.dataToPass} />
    : null;
}
...