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)

我检查了道具，一切都很好，每次更新时都会收到更长的Array，但是由于某种原因，它不会触发组件的重新渲染。

我希望你们中的一个比我有更多的经验，可以为我指明正确的方向，

这是减速器：

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() });来复制列表。

React组件不会使用Redux道具重新渲染ChartJS图表

1 个答案: