关于在Raect使用componentDidMount遇到的问题

Question

项目需要可视化数据，子组件采用了d3js进行绘制，即先挂载svgdom，按照官网的说明文档，将读取后端数据和绘制内容放于componentDidMount中，绘制的内容可以与用户互动，改变父组件的state值，但是当改变了父组件的state值后，子组件并不会重新渲染。之前百度搜索过，解决办法目前采用的是给子组件一个key值，key值取随机数，这样只要父组件state，key值就会改变，子组件就可以正常显示了。但是由于后台查询数据量过大的原因，需要控制成，父组件state内容中特定的值变化，子组件才会刷新。网上搜索可以用shouldCompentUpdate。但是这样做就需要不使用key=随机数这一个方法。那么如何让父组件的state值改变以后，子组件重新绘制呢？
代码结构大致如下：
父组件：

class App extends Component {
constructor(props) {
    super(props);
    this.state = { province: '中国', city: '中国', time:moment('2013-01-01') }
  }
handlechange=(e)=>{this.setState{province:e}}
...
render(){
return(<TopCity key={Math.random()} time={time} handlechange={this.handlechange}></TopCity>)
}
}

子组件：

class TopCity extends Component {
  constructor(props) {
    super(props);
    this.TopCity = React.createRef();
  }
  componentDidMount() {
    this.getData();//包含了异步获取数据后，绘制图像的方法,
//绘制的图像可以触发父组件传入的handlechange方法
render() {
    return (
      <svg width="600" height="220" id="TopCitysvg" ref={this.TopCity}></svg>
    )
  }
  }
}
export default TopCity;

问题为，如果不再子组件加key={Math.random()画，子组件触发了父组件传入的改变父组件的state方法后，在render中使用控制台打印可以得知，父组件中的state值确实改变了，但是子组件中也确实获取了最新的父组件的值，但是Component中的方法未重新执行。我该如何使得Component的中的方法重新执行呢？

Answer 1

componentDidMount 只在组件挂载时执行一次，后续更新逻辑需要放到 componentDidUpdate 中。