Реагировать на передачу объекта переменной в setState против анонимного объекта в setState

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() и * Компонент 1005 * из диаграммы. js обрабатывался до того, как состояние получило возможность обновляться. Однако, когда я вышел из системы, на консоли он показал мое состояние с измененными значениями. Однако на диаграмме не отображалось ни одно из значений.

Когда я позвонил setState() и передал анонимный объект (см. Закомментированную рабочую версию setState()), диаграмма отобразила значения.

Почему это не работает, когда я сохранил извлеченные данные в переменную и передал их в качестве аргумента для setState()?

Answer 1

Одна вещь, которую я заметил, это то, что state.chartData.datasets - это массив, но в setChartData вы задаете данные для массива, а не для одного из его элементов.

Это:

chartDataUpdate['datasets'].data = hours;

Должно быть:

chartDataUpdate['datasets'][0].data = hours;