Ошибка rest api / json при ее использовании с реагировать на чарты

Question

Спасибо, Серхио, за ваш рекомендуемый ответ.Мне очень нравится ваш продемонстрированный ответ, но проблема в том, что я все еще не могу увидеть график из-за каждой ошибки.Используемый здесь API использует лямбда-функцию AWS

1. App.js

   import React, { Component } from "react";
   import axios from "axios";
   
   import Chart from "./chart";
   
   class App extends Component {
     constructor() {
       super();
   
       this.state = {
         labels: [],
         data: []
       };
     }
   
     componentDidMount() {
       this.getChartData();
     }
   
     getChartData() {
       Date.prototype.formatMMDDYYYY = () => {
         return (
           this.getDate() + 1 + "/" + this.getMonth() + "/" + this.getFullYear()
         );
       };
   
      axios.get('https://cors-anywhere.herokuapp.com/https://api.myjson.com/bins/zfpa2') 
        .then(results => {
         results.forEach(packet => {
           this.state.labels.push(new Date(packet.updated).formatMMDDYYYY());
           this.state.data.push(parseFloat(packet.users));
         });
          this.setState({ data, labels })
       })
        .catch(error => {
         console.log(error);
       })
     }
   
     render() {
       return (
         <div>
           <Chart labels={this.state.labels} data={this.state.data} />
         </div>
       );
     }
   }
   
    export default App;
   

2. chart.js

   import React, {Component} из 'response';import {Bar} из'act-chartjs-2 ';

    class Chart extends Component {
    render() {
     const chartData = {
     labels: this.props.labels,
     datasets: [
               {
                 data: this.props.data,
                 backgroundColor: 'rgba(255, 99, 132, 0.6)',
               }
             ]
           }
     return (
        <div className="chart">
            <Bar 
               data={chartData}
               options={{
                   title: {
                       display: true,
                       text: 'Largest cities in Delhi',
                       fontSize: 25
                   },
                   legend: {
                       display: true,
                       position: 'right'
                   }
               }}
           />
       </div>
      );
     }
    }
   
    export default Chart;
   

3. Package.json

      {
        "name": "apicharts",
        "version": "0.1.0",
        "private": true,
        "dependencies": {
          "axios": "^0.18.0",
          "chart.js": "^2.7.3",
          "jquery": "^3.3.1",
          "react": "^16.8.2",
          "react-chartjs-2": "^2.7.4",
          "react-dom": "^16.8.2",
          "react-scripts": "2.1.5",
          "react-vis": "^1.11.6"
        },
        "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
        },
       "eslintConfig": {
       "extends": "react-app"
        },
       "browserslist": [
       ">0.2%",
       "not dead",
       "not ie <= 11",
       "not op_mini all"
        ]
      }
   

Пожалуйста, помогите мнерешить эту проблему

Answer 1

Первый: если вы хотите изменить состояние компонента, вы должны сделать это, используя функцию this.setState({...}) Реакция, если вы не сделаете это таким образом, реакция не будет запускать сновафункция рендеринга.Поэтому вам нужно изменить способ загрузки данных:

    const labels = [];
    const data = [];
    results.forEach(packet => {
      labels.push(new Date(packet.updated).formatMMDDYYYY());
      data.push(parseFloat(packet.users));
    });
    this.setState({
     labels,
     data
    })

Теперь помните, что constructor просто запускается, как только компонент будет смонтирован, так что если вы установите состояние chart.js со значениями вРеквизит, когда родительский компонент запустил функцию setState, ваши данные не будут обновляться.Поэтому здесь нам нужно удалить следующее из constructor:

chartData: {
    labels: props.labels,
    datasets: [
                {
                  data: props.data,
                  backgroundColor: 'rgba(255, 99, 132, 0.6)',
                 }
              ]
 }

и добавить к функции render, например:

const chartData = {
        labels: props.labels,
        datasets: [
                    {
                      data: props.data,
                      backgroundColor: 'rgba(255, 99, 132, 0.6)',
                     }
                  ]
     }

Наконец, отправьте данные, которые вы недавно создали

<Bar 
  data={chartData}
  options={{
      title: {
          display: true,
          text: 'Largest cities in Delhi',
          fontSize: 25
      },
      legend: {
          display: true,
          position: 'right'
      }
  }}
/>

Кроме того, поскольку вы используете React, вы не должны использовать jQuery.Если вы просто используете его для загрузки данных, вы можете использовать другие альтернативы, такие как axios или fetch для извлечения данных:)

EDIT

Date прототип доступен только для чтения, поэтому вы должны создать новую функцию для его форматирования в App.js:

getFormatDate = (date) => {
    return (
      date.getDate() + 1 + "/" + date.getMonth() + "/" + date.getFullYear()
    );
  }

Измените ваш getChartData с помощью следующего кода, чтобы решитьвыпуск:

getChartData() {
   axios.get('https://cors-anywhere.herokuapp.com/https://api.myjson.com/bins/zfpa2') 
     .then(({ data }) => {
       const labels = [];
       const dataArray = [];
       data.forEach(packet => {
        labels.push(this.getFormatDate(new Date(packet.updated)));
        dataArray.push(parseFloat(packet.users));
      });
       this.setState({ data : dataArray, labels })
    })
     .catch(error => {
      console.log(error);
    })
  }

Answer 2

Do NOT изменяет состояние напрямую.Всегда используйте setState.

// BAD
results.forEach(packet => {
  this.state.labels.push(new Date(packet.updated).formatMMDDYYYY());
  this.state.data.push(parseFloat(packet.users));
});

// GOOD
const labels = [];
const data = [];

results.forEach(packet => {
  labels.push(new Date(packet.updated).formatMMDDYYYY());
  data.push(parseFloat(packet.users));
});

this.setState({ data, labels });

Когда вы изменяете состояние напрямую, компонент никогда не выполняет повторную визуализацию, то есть Chart никогда не выполняет повторную визуализацию с обновленными данными.