仅在父组件完成重新渲染后才调用子组件中的方法

Question

我有一个父组件显示的图形质量较低<HeatMap />。 HeatMap 有一个子组件 <MyButton {...data}>。 MyButton 基本上是一个按钮，用于下载图形图像。我的要求是：单击按钮后，父项 (HeatMap) 应该重新呈现为高质量的 svg 图像。只有在那之后，才会开始下载。

我取得的成就：第一次单击该按钮时，图像质量变为 svg，但会下载 png 图像。我认为下载在父级完全呈现之前开始。

代码：

class HeatMap extends Component {
  constructor (props) {
    super(props);
    this.state = {
      getSVG: false,
      loadedData: [],
    }
  }
  render () {
   const { getSVG, loadedData } = this.state;
   return (
    <Fragment>
      {getSVG
        ? <HeatmapSeries colorType="literal" data={loadedData} /> // svg graph
        : <HeatmapSeriesCanvas colorType="literal" data={loadedData} />} // png(low-qlty)
      <MyButton 
        {...this.props}
        svgFunction={(required) => this.setState({ getSVG: true})}
        getSVG={getSVG} 
       />
    </Fragment>
  )
  }
}

class MyButton extends Component {
  render() {
    return (
      <Button size="small" icon="download" onClick={this._downloadSVG} >SVG</Button>
    )
  }
  /**
   * Generate the image and the download action
   * @return {void}
  **/
  async _downloadSVG() {
    const { svgFunction } = this.props;
    if (typeof svgFunction === 'function') {
      svgFunction(); // re-render the graph as a vector (try to re-render parent first)
    }
    methodToDownloadGraph({...this.props}); // graph svg is passed as argument
  }
}

问题是：methodToDownloadGraph 完成之前，父项的重新渲染完成。 这是我想要实现的目标的图片：

Answer 1

React 的setState 是一个异步函数，也就是说调用后不会立即更新状态。如果你想在状态更新后做一些操作，那么你需要将回调作为第二个参数传递给 setState 函数。

要解决此问题，您需要在 HeatMap 组件而不是 Button 组件中调用 methodToDownloadGraph 函数。

你可以这样做：

svgFunction={(required) => this.setState({ getSVG: true}, () => methodToDownloadGraph())}

Answer 2

试试这个

async _downloadSVG() {
        const { svgFunction } = this.props;
        if (typeof svgFunction === 'function') {
          await svgFunction(); // Add this line as it is
        }
        methodToDownloadGraph({...this.props}); // graph svg is passed as argument
      }

仅在父组件完成重新渲染后才调用子组件中的方法

Call a method in child component only after parent completes re-render

javascript

reactjs

svg

callback

asynchronous-javascript