React中如何为C3.js图表更新Props对应的State数组

嘿，我明白你的问题啦！你现在遇到的是React类组件里props更新后，state没有跟着同步的问题——你的chartData只在组件初始化（constructor阶段）从props取了一次值，之后父组件更新props时，state并不会自动更新，因为constructor只会执行一次。下面给你两种靠谱的解决方案：

方案一：用componentDidUpdate同步state #

这个方法适合你需要把props存在state里的场景，我们可以把生成chartData的逻辑抽成复用函数，然后在props变化时更新state：

class Graph extends React.Component {
  constructor(props) {
    super(props);
    // 初始化时调用复用函数生成chartData
    this.state = {
      chartData: this.generateChartData(props)
    };
  }

  // 抽离生成chartData的逻辑，方便初始化和更新时复用
  generateChartData = (props) => {
    return {
      columns: [
        [...['Remaining_Loan'], ...props.remaining_loan],
        [...['total_repayment_array'], ...props.total_repayment_array],
        [...['Equity_From_Appreciation_array'], ...props.Equity_From_Appreciation_array]
      ],
      types: {
        Remaining_Loan: 'area-spline',
        total_repayment_array: 'area-spline',
        Equity_From_Appreciation_array: 'area-spline'
      },
      groups: [['Remaining_Loan', 'total_repayment_array','Equity_From_Appreciation_array']]
    };
  }

  // 监听props变化，更新state
  componentDidUpdate(prevProps) {
    // 对比前后props的关键数组，避免不必要的更新
    // 如果是引用类型数组（父组件每次传新数组），直接用!==对比即可
    if (
      prevProps.remaining_loan !== this.props.remaining_loan ||
      prevProps.total_repayment_array !== this.props.total_repayment_array ||
      prevProps.Equity_From_Appreciation_array !== this.props.Equity_From_Appreciation_array
    ) {
      this.setState({
        chartData: this.generateChartData(this.props)
      });
    }

    // 如果是同一数组但内容修改（引用不变），需要深对比，比如用lodash的isEqual：
    // import isEqual from 'lodash/isEqual';
    // if (
    //   !isEqual(prevProps.remaining_loan, this.props.remaining_loan) ||
    //   !isEqual(prevProps.total_repayment_array, this.props.total_repayment_array) ||
    //   !isEqual(prevProps.Equity_From_Appreciation_array, this.props.Equity_From_Appreciation_array)
    // ) {
    //   this.setState({ chartData: this.generateChartData(this.props) });
    // }
  }

  render() {
    console.log("当前props:", this.props.remaining_loan);
    // 这里渲染你的图表组件，传入更新后的chartData
    return (
      // <YourChartLib data={this.state.chartData} />
    );
  }
}

方案二：直接在render中使用props生成数据（更简洁） #

如果你的chartData不需要存在state里做其他操作，完全可以直接在render阶段用props生成，这样就不用维护state和props的同步问题了：

class Graph extends React.Component {
  generateChartData = () => {
    return {
      columns: [
        [...['Remaining_Loan'], ...this.props.remaining_loan],
        [...['total_repayment_array'], ...this.props.total_repayment_array],
        [...['Equity_From_Appreciation_array'], ...this.props.Equity_From_Appreciation_array]
      ],
      types: {
        Remaining_Loan: 'area-spline',
        total_repayment_array: 'area-spline',
        Equity_From_Appreciation_array: 'area-spline'
      },
      groups: [['Remaining_Loan', 'total_repayment_array','Equity_From_Appreciation_array']]
    };
  }

  render() {
    const chartData = this.generateChartData();
    console.log("当前props:", this.props.remaining_loan);
    return (
      // <YourChartLib data={chartData} />
    );
  }
}

为什么你的原代码没生效？ #

你写的onChange方法没有被触发，React不会自动调用这个方法——只有当你手动绑定触发时机（比如在父组件传 onChange 回调，或者在组件内部监听特定事件）才会执行。而上面的两种方案都是React官方推荐的处理props更新的方式。

内容的提问来源于stack exchange，提问作者Rachit Gupta