básicamente, mi caso de uso es que cuando hago clic en el botón de descarga presente en cada fila de la tabla, mis datos devueltos deben descargarse a través de CSV. Estoy creando la referencia así
class ViewStorageGroups extends Component { csvLink = React.createRef();Este es mi componente personalizado que representa una tabla
<TableWithHeaders tableHeaders = {tableData.tableHeaders} rowData = {tableData.rowData} formatter = {tableData.formatter} handleClick = {this.handleClick} clickable = {tableData.clickable} page = {rowsPerPage} rowsPerPage = {rowsPerPage} handlePageChange = {this.handlePageChange} handleChangeRowsPerPage = {this.handleChangeRowsPerPage} />esta es mi función handleClick que se llama cuando presiono el botón de descarga
handleClick = (rowData, clickComponent,e) => { const storageGroupDto = StorageGroupHelpers.convertStorageGroupDataToDto(rowData) this.setState({groupDataDownloadResp: storageGroupDto}, () => this.csvLink.current.link.click()) }y estoy usando el componente CSVLink de React para descargar los datos como csv.
renderDownloadedData = () => { const fileName = createFileNameForCSVDownload('STORAGE_GROUP_DOWNLOAD', getWarehouseIdFromRedux(this.props)) return ( <div> <CSVLink ref={this.csvLink} data={this.state.groupDataDownloadResp} filename={fileName} target='_blank' /> </div> ) } Ahora, el problema es que cuando se activa handleClick, mi this.csvLink.current aparece como nulo. la misma implementación está presente en otros lugares de mi base de código y funciona correctamente. No puedo averiguar dónde me estoy equivocando. También intenté inicializar csvLink = React.createRef(); en componenteDidMount y el constructor, pero sigue ocurriendo el mismo error.
finalmente obtuve el problema pero no estoy seguro de la razón. si uso
<CSVLink ref={this.csvLink} data={this.state.groupDataDownloadResp} filename={fileName} target='_blank' />dentro de una función de flecha como esta
renderDownloadedData = () => { const fileName = createFileNameForCSVDownload('STORAGE_GROUP_DOWNLOAD', getWarehouseIdFromRedux(this.props)) return ( <div> <CSVLink ref={this.csvLink} data={this.state.groupDataDownloadResp} filename={fileName} target='_blank' /> </div> ) }y luego llamar a este render interior como este
render () { return ( {this.renderDownloadedData()} ) } Devuelve el valor actual de reactRef() como nulo. sin embargo, si no uso la función de flecha y uso la función como esta renderDownloadedData () , funciona perfectamente bien. si alguien me puede explicar la razon se lo agradeceria mucho