與React Chart.js一起使用時出現REST API / JSON錯誤

Question

感謝塞爾吉奧的建議答案。 我真的很喜歡您演示的答案，但是問題是由於每個錯誤，我仍然無法看到圖表。 此處使用的api使用AWS的lambda函數

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之

   從'react'導入React，{組件}; 從'react-chartjs-2'導入{Bar};

     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

不要直接修改狀態。 始終使用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永遠不會使用更新的數據重新渲染。

Answer 2

第一：如果要修改組件的狀態，則必須使用this.setState({...}) React函數來完成，如果不這樣做，則react不會再次觸發render函數。 因此，您需要更改加載數據的方式：

    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中的值設置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來獲取數據:)

編輯

Date原型是只讀的，因此您應該創建一個新函數以在App.js對其進行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);
    })
  }