Defino un método en un componente de clase React de la siguiente manera

 onSaveAudio = (e) => { e.preventDefault(); const { audioBlob } = this.state; let reader = new FileReader(); reader.onloadend = function () { const base64 = reader.result; const bstr = base64.split(',')[1]; console.log(bstr); console.log('this.props', this.props); this.props.onSaveAudio(bstr); } reader.readAsDataURL(audioBlob); }

En la línea console.log('this.props', this.props) , está imprimiendo "indefinido"; en la línea this.props.onSaveAudio , se genera un error:

TypeError no capturado: no se puede leer la propiedad 'onSaveAudio' de undefined en FileReader.reader.onloadend (recorder.js:300)

Tengo entendido que "onloadend" se activa después de que el "lector" termine de leer "audioBlob". Necesito llamar a this.props.onSaveAudio en la función "onloadend", porque si lo llamo fuera de "onloadend", no puedo programar la llamada después de que termine la lectura y "reader.result" esté listo, y "bstr" se resolvería como indefinido con el tiempo incorrecto; pero si llamo a this.props.onSaveAudio dentro de "onloadend", entonces "this" no se reconoce. Parece ser un dilema.

Supongo que necesito una solución para enlazar "esto" dentro de "onloadend", o poder cronometrar de alguna manera una llamada this.props.onSaveAudio fuera de la función "onloadend", después de que la función "onloadend" termine de ejecutarse.

¿Algún consejo?