0
354
VistasLlame a un método en el componente secundario solo después de que el padre complete la nueva representación
Tengo un gráfico con una calidad gráfica inferior que se muestra en un componente principal <HeatMap /> . HeatMap tiene un componente secundario, <MyButton {...data}> . MyButton es básicamente un botón, que descarga la imagen del gráfico. Mi requisito es: después de hacer clic en el botón, el padre (Mapa de HeatMap ) debe volver a renderizarse en una imagen svg de alta calidad. Y solo después de eso, la descarga debería ocurrir.
Lo que he podido lograr: al hacer clic en el botón por primera vez, la calidad de la imagen cambia a un svg, pero se descarga la imagen png . Creo que la descarga comienza antes de que el padre esté completamente renderizado.
Código:
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 } } El problema es: methodToDownloadGraph se completa antes, se completa la nueva representación de los padres. Aquí hay una imagen de lo que quiero lograr: 
2 Respuestas
Responde la pregunta0
Prueba este
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 }0
setState de React es una función asíncrona, lo que significa que no actualizará el estado inmediatamente después de llamarlo. Si desea realizar alguna operación después de la actualización del estado, debe pasar la devolución de llamada como segundo argumento a la función setState .
Para resolver este problema, deberá llamar a la función methodToDownloadGraph en el componente HeatMap en lugar del componente Button .
Puedes hacer algo como esto:
svgFunction={(required) => this.setState({ getSVG: true}, () => methodToDownloadGraph())}