Компонент React не будет перерисовывать диаграмму ChartJS с использованием редукционных реквизитов

Question

У меня возникла проблема с вызовом React для повторного рендеринга графика, созданного с помощью ChartJS, я не знаю, нужно ли мне каждый раз уничтожать текущий график и создавать новый, но клянусь, он работал раньше, а теперь нетt и я не могу понять, почему TT

Вот мой код для компонента:

import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import Chart from 'chart.js';


class ChartComp extends React.Component {
  constructor() {
    super()
    this.state = {
      data:[]
    }

    this.drawChart = this.drawChart.bind(this)
  }


  drawChart(){

    var myLineChart = new Chart(document.getElementById("line-chart"), {
          type: 'bar',
          data: {
            labels: this.props.chartData,
            datasets: [{
                data: this.props.chartData,
                label: "Active Users",
                backgroundColor: 'white'
              }
            ]
          },
          options: {
            responsive: true,
            mode: null,
            legend: { display: false },
            title: {
              display: true,
              text: 'User Activity',
              color: 'white'
            }
          }
        });
  }

  componentDidUpdate() {
    this.drawChart();
  }


  componentDidMount() {


  }

  render() {
    return (
      <div style={{flex:1}}>
        <canvas style={{height:'px !important'}} id="line-chart" width="100%" ></canvas>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    'mapData' : state.mapData,
    'chartData': state.chartData
  }
}

function mapDispatchToProps(dispatch) {
  return {

  }
}

export default connect(
  mapStateToProps, mapDispatchToProps
)(ChartComp)

Я проверил реквизит, и все в порядке, он получает более длинный массив каждый раз, когда получаетобновлен, но по какой-то причине не вызывает повторного рендеринга компонента.

Я надеюсь, что один из вас имеет больше опыта в этом, чем я, что может указать мне правильное направление,

вот редуктор:

let initalState ={
  mapData: [],
  chartData: []
}

const rootReducer = (state = initalState, action) => {
  switch (action.type) {
    case "UPDATE-CHART":
      return Object.assign({}, state, { chartData: action.payload });
      break;
    case "UPDATE-MAP":
      return Object.assign({}, state, { mapData: action.payload });
      break;
    default:
      return state
  }
}

export default rootReducer;

Answer 1

Упомянул об этом в комментарии, но официально добавлю в качестве ответа, так как это решило проблему.

Похоже, что вы можете мутировать this.props.chartData где-то в создателе действия или восстановителе, и реакция необновление в результате, потому что this.props.chartData по-прежнему указывает на тот же список (теперь все будет длиннее).Я бы порекомендовал попробовать Object.assign({}, state, { chartData: action.payload.slice() }); в вашем редукторе, чтобы сделать копию списка.