Question

在状态已被从API提取的数据更新后，呈现图表时遇到问题。

import React, { Component } from 'react';
import { Bar, Line, Pie } from 'react-chartjs-2';

export default class PopChart extends Component {
  constructor(props) {
    super(props);

    this.state = {
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'AAA',
            data: [],
            backgroundColor: []
          }
        ]
      }
    };
  }

  url = 'api_url';

  componentDidMount() {
    fetch(this.url)
      .then(response => {
        this.setState({
          httpStatusCode: response.status,
          httpStatusOk: response.ok
        });
        if (response.ok) {
          return response.json();
        } else if (response.status === 404) {
          // Not found
          throw Error('HTTP 404, Not found');
        } else {
          throw Error(`HTTP ${response.status}, ${response.statusText}`);
        }
      })
      .then(responseData => {
        console.log('Then function');

        this.setChartProperties(responseData);
      })
      .then(() => {
        this.setState({ loading: false });
      })
      .catch(error => {
        console.log(error);
      });
  }

  setChartProperties = data => {
    this.setChartData(data);
    // this.setChartXAxis(data);
  };

  setChartData = data => {
    let hours = data.map(event => event.hour);
    hours = hours.splice(0, 10);
    const { chartData } = { ...this.state };

    const chartDataUpdate = chartData;
    chartDataUpdate['datasets'].data = hours;

    // Working version
    // this.setState({
    //   chartData: {
    //     labels: ['a', 'a', 'a', 'a', 'a', 'a', 'a'],
    //     datasets: [
    //       {
    //         label: 'AAA',
    //         data: hours,
    //         backgroundColor: []
    //       }
    //     ]
    //   }
    // });

    // Not working version
    this.setState({ chartData: chartDataUpdate });
  };



  render() {
   <Bar data={this.state.chartData} />;
  }
}

起初，我认为问题与fetch()的异步性质有关，在状态有机会被更新之前，已呈现Chart.js的<Bar/>组件。但是，当我注销状态时，在控制台上会显示更改后的状态。但是，该图表未显示任何值。

当我打电话给setState()并传递一个匿名对象（请参阅setState()的注释掉的工作版本）时，图表将显示这些值。

当我将获取的数据存储到变量中并将其作为setState()的参数传递时，为什么它不起作用？

Answer 1

我注意到的一件事是$emails = array_reduce($inDatabase, function ($arr, $obj) { return array_merge($arr, array_keys(get_object_vars($obj))); }, []);是一个数组，但是在state.chartData.datasets中，您正在数组上设置数据而不是其元素之一。

此：

setChartData

应该是：

chartDataUpdate['datasets'].data = hours;

反应将变量对象传递给setState与匿名对象传递给setState

1 个答案: