Невозможно отобразить данные на гистограмме с помощью react-chart-2

Question

Я пытаюсь использовать react-chartjs-2 оболочку React для chart.js. Я не уверен, почему не могу отобразить гистограмму. Возможно, я устанавливаю состояние для опоры данных. Мои данные, возвращаемые из API, который я хочу отобразить в диаграмме, имеют следующий формат:

[{packets: 14132, bytes: 743572434}, {packets: 10848, bytes: 824102247}, {packets: 7412, bytes: 1391125317}, {packets: 3978, bytes: 9107974}, ... , {packets: 4228, bytes: 8781508}]

Я хочу обновить опору данных в моем состоянии гистограммы, но не уверен, что я делать это правильно. Когда я console.log this.state.barchart.datasets.data в render(), он сначала появляется как пустой массив, а затем заполняется соответствующими данными. Когда я регистрирую this.state.barchart.labels, всегда появляются ожидаемые метки. Поскольку labels устанавливается, а data нет, я не уверен, в чем проблема. Я также не знаю, устанавливаю ли я условие для отображения самой гистограммы, потому что иногда this.state.barchart.datasets.data.length выдает ошибку: TypeError: Cannot read property 'length' of undefined.

Вот мой компонент:

class Devices extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      barchart: {
        labels: [],
        datasets: [
          {
            label: "byte count",
            backgroundColor: "rgba(75,192,192,1)",
            borderColor: "rgba(0,102,204,1)",
            borderWidth: 2,
            data: [],
          },
        ],
      }
  }
    
  componentDidMount(){
      all_hours = ["12:00 am", "1:00 am " ... "12:00 pm"]
      fetch(API_URL)
      .catch((error) => console.error("Error: ", error))
      .then((data) => {
        var barchart = {...this.state.barchart}
        barchart.labels = all_hours // update the labels 
        barchart.datasets.data = data.map(x => { return x["bytes"]}) // update the data
        this.setState({barchart})
    })

  render(){
    return(
        <div className="Line">
            {typeof(this.state.barchart.datasets.data) !== "undefined" 
              && this.state.barchart.datasets.data.length > 0? (
            <Bar
              data = {this.state.barchart}
              options={{
                title: {
                  display: true,
                  text: "Total Byte Count Per Hour",
                  fontSize: 20,
                },
                legend: {
                  display: true,
                  position: "right",
                },
              }}
            />
            ) : (
              <div>Loading...</div>
            )}
          </div>
    )
  }
}

Answer 1

Проблема в том, что вы добавляете данные не в то место.

barchart.datasets.data = data.map(x => { return x["bytes"]})

barchart.datasets - это массив, который в вашем случае содержит единственный набор данных. Следовательно, это следует переписать следующим образом:

barchart.datasets[0].data = data.map(x => { return x["bytes"]})

Это можно упростить следующим образом:

barchart.datasets[0].data = data.map(x => x["bytes"])