javascript - 变量在 React 重新渲染时丢失了所有数据

Question

我有一个 React 项目，它利用 Chart JS 根据数据绘制图表。我有一个下拉列表选择器来选择要从中提取的数据集。但是，在我切换到另一个数据集然后切换回初始渲染的数据集后，它似乎不再工作了。这是我的代码：

import React from 'react';
import { Line } from 'react-chartjs-2';
import { chartData } from './Search.js';
import { xLabels } from './Search.js';
import { allEpsData } from './Search.js';

let chartDataSeason = [];
let xLabelsSeason = [];

export class Graph extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectValue: '',
      seasonSelected: false,
      chartIt: {
        labels: xLabels,
        datasets: [
          {
            label: 'Rating',
            data: chartData,
            fill: false,
            borderColor: '#00B4CC',
          },
        ],
      },
      chartItSeason: {
        labels: xLabelsSeason,
        datasets: [
          {
            label: 'Rating',
            data: chartDataSeason,
            fill: false,
            borderColor: '#00B4CC',
          },
        ],
      },
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    if (e.target.value === 'All Seasons') {
      this.setState({
        seasonSelected: false,
        chartIt: {
          labels: xLabels,
          datasets: [
            {
              label: 'Rating',
              data: chartData,
              fill: false,
              borderColor: '#00B4CC',
            },
          ],
        },
      });
      console.log(chartData);
    } else {
      chartDataSeason = [];
      xLabelsSeason = [];
      let seasonNum = e.target.value.slice(6);

      for (let i = 0; i < allEpsData[seasonNum - 1].length; i++) {
        chartDataSeason.push(allEpsData[seasonNum - 1][i].imdbRating);
        xLabelsSeason.push(
          `s${seasonNum}e${allEpsData[seasonNum - 1][i].Episode} "${
            allEpsData[seasonNum - 1][i].Title
          }"`
        );
      }

      this.setState({
        selectValue: e.target.value,
        seasonSelected: true,
        chartItSeason: {
          labels: xLabelsSeason,
          datasets: [
            {
              label: 'Rating',
              data: chartDataSeason,
              fill: false,
              borderColor: '#00B4CC',
            },
          ],
        },
      });
    }
    // console.log(chartDataSeason)
  }
  render() {
    let seasons = [];
    for (let i = 0; i < allEpsData.length; i++) {
      seasons.push(i);
    }

    if (this.state.seasonSelected === false) {
      return (
        <div>
          <select // selector
            className="select"
            value={this.state.selectValue}
            onChange={this.handleChange}
          >
            <option>All Seasons</option>
            {seasons.map((el) => {
              return <option key={el}>season {el + 1}</option>;
            })}
          </select>
          <div className="line-container">
            <Line
              data={this.state.chartIt}
              width={600}
              height={400}
              options={{
                maintainAspectRatio: false,
                scales: {
                  xAxes: [
                    {
                      ticks: {
                        display: true, //this will remove only the label
                      },
                      gridLines: {
                        show: false,
                        display: false,
                      },
                    },
                  ],
                  yAxes: [
                    {
                      gridLines: {
                        show: false,
                        drawBorder: false,
                      },
                    },
                  ],
                },
                animation: {
                  duration: 200,
                  easing: 'easeInOutQuart',
                },
                tooltips: {
                  enabled: true,
                },
              }}
            />
          </div>
          <div className="seasons-graph-container"></div>
        </div>
      );
    } else {
      return (
        <div>
          <select
            className="select"
            value={this.state.selectValue}
            onChange={this.handleChange}
          >
            <option>All Seasons</option>
            {seasons.map((el) => {
              return <option key={el}>season {el + 1}</option>;
            })}
          </select>
          <div className="line-container">
            <Line
              data={this.state.chartItSeason}
              width={600}
              height={400}
              options={{
                maintainAspectRatio: false,
                scales: {
                  xAxes: [
                    {
                      ticks: {
                        display: false, //this will remove only the label
                      },
                      gridLines: {
                        show: false,
                        display: false,
                      },
                    },
                  ],
                  yAxes: [
                    {
                      gridLines: {
                        show: false,
                        drawBorder: false,
                      },
                    },
                  ],
                },
                animation: {
                  duration: 200,
                  easing: 'easeInOutQuart',
                },
                tooltips: {
                  enabled: true,
                },
              }}
            />
          </div>
          <div className="seasons-graph-container"></div>
        </div>
      );
    }
  }
}

问题在于chartData，它没有被正确地重新渲染——与之关联的所有数据都已替换为最后一个菜单项的数据。然而奇怪的是，xLabels确实得到了正确的渲染。什么都没有改变或的值，chartData但xLabels只会xLabels正确更新。有什么我在这里想念的吗？提前为意大利面条代码道歉，我还在学习 React！

标签： javascriptreactjscharts