与React Chart.js一起使用时出现REST API / JSON错误

问题描述

感谢塞尔吉奥的建议答案。 我真的很喜欢您演示的答案，但是问题是由于每个错误，我仍然无法看到图表。 此处使用的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" ] } 

请帮我解决这个问题

第一：如果要修改组件的状态，则必须使用 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。 如果仅使用它来加载数据，则可以使用其他替代方法，例如或来获取数据:)

编辑

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);
    })
  }