react使用类组件创建饼图，在接口数据更新之后没法显示出饼图？

Question

使用componentWillReceiveProps这样子更新会显示两个，上面不显示，下面是数据更新之后的，父组件接口数据传过来不显示图表这个问题要怎么解决呢？

import React, { setState } from 'react';
import { Chart, Util } from '@antv/g2'
class MyPieChart extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        { type: '正常', value: 240 },
        { type: '过载', value: 160 },
      ],
    }
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.chartData
    },()=>{
      this.initChart()
    })
  }
  initChart() {
    const chart = new Chart({
      container: this.el,
      autoFit: true,
      height: 240,
    });
    chart.data(this.state.data);

    chart.coordinate('theta', {
      radius: 0.75
    });
    chart.tooltip({
      showMarkers: false
    });

    const interval = chart
      .interval()
      .adjust('stack')
      .position('value')
      .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
      .style({ opacity: 0.4 })
      .state({
        active: {
          style: (element) => {
            const shape = element.shape;
            return {
              matrix: Util.zoom(shape, 1.1),
            }
          }
        }
      })
      .label('type', (val) => {
        const opacity = val === '四线及以下' ? 1 : 0.5;
        return {
          offset: -30,
          style: {
            opacity,
            fill: 'white',
            fontSize: 12,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)',
          },
          content: (obj) => {
            return obj.type + '\n' + obj.value + '%';
          },
        };
      });

    chart.interaction('element-single-selected');

    chart.render();
  }
  // componentWillUnMount = () => {
  //   this.setState = (state, callback) => {
  //     return;
  //   };
  // }
  render() {
    return <>
      <div style={{ backgroundColor: '#f8fafc' }} ref={(el) => this.el = el}></div>
    </>;
  }
}
export default MyPieChart

Answer 1

弄了一个解决方法，有没有其他更方便的方法呀。
父组件(当有数据时再显示)：

{lineendDevPie.length !== 0 ? <MyPieChart chartData={lineendDevPie} /> : ''}

图表组件：

import React, { setState } from 'react';
import { Chart, Util } from '@antv/g2'
class MyPieChart extends React.Component {
  constructor(props) {
    super(props);
    const data = props.chartData || [
      {
        type: '正常',
        value: 15,
      },
      {
        type: '重载',
        value: 145,
      },
    ];
    this.state = {
      data,
      chart: null,
    };
  }
  static getDerivedStateFromProps(props, state) {
    const data = props.data || state.data;
    if (data !== state.data) {
      return {
        data,
      };
    }
    return null;
  }
  componentDidMount() {
    const { data } = this.state;
    const chart = new Chart({
      container: this.el,
      autoFit: true,
      height: 240,
    });
    window.onresize = chart.resize;
    chart.changeData(data);
    chart.coordinate('theta', {
      radius: 0.75
    });
    chart.tooltip({
      showMarkers: false
    });

    const interval = chart
      .interval()
      .adjust('stack')
      .position('value')
      .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060'])
      .style({ opacity: 0.4 })
      .state({
        active: {
          style: (element) => {
            const shape = element.shape;
            return {
              matrix: Util.zoom(shape, 1.1),
            }
          }
        }
      })
      .label('type', (val) => {
        const opacity = val === '四线及以下' ? 1 : 0.5;
        return {
          offset: -30,
          style: {
            opacity,
            fill: 'white',
            fontSize: 12,
            shadowBlur: 2,
            shadowColor: 'rgba(0, 0, 0, .45)',
          },
          content: (obj) => {
            return obj.type + '\n' + obj.value + '%';
          },
        };
      });

    chart.interaction('element-single-selected');

    chart.render();
    this.setState({
      chart
    });
  }
  shouldComponentUpdate(nextProps, nextState) {
    return nextState.data !== this.state.data;
  }
  
  componentWillUnMount = () => {
    this.setState = (state, callback) => {
      return;
    };
  }
  render() {
    return <>
      <div style={{ backgroundColor: '#f8fafc' }} ref={(el) => this.el = el}></div>
    </>;
  }
}
export default MyPieChart