javascript - react : FileReader onloadend doesn't recognize "this" if defined in a component method

Question

我在 React 类组件中定义了一个方法，如下所示

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);
    
    }

在 console.log('this.props', this.props)行，它正在打印“未定义”；在 this.props.onSaveAudio行，抛出错误:

Uncaught TypeError: Cannot read property 'onSaveAudio' of undefined atFileReader.reader.onloadend (recorder.js:300)

我的理解是在“阅读器”完成阅读“audioBlob”后触发“onloadend”。我需要调用 this.props.onSaveAudio在“onloadend”函数中，因为如果我在“onloadend”之外调用它，我无法在阅读完成并且“reader.result”准备好之后调用到，并且“bstr”将错误地解析为未定义定时;但如果我调用 this.props.onSaveAudio在“onloadend”中，则无法识别“this”。似乎进退两难。
我的猜测是我需要一个解决方案来在“onloadend”中绑定(bind)“this”，或者能够以某种方式计时 this.props.onSaveAudio在“onloadend”函数完成执行后，在“onloadend”函数之外调用。
有什么建议吗？

Answer 1

我发现的一种方法是在定义“reader.onloadend”时使用箭头函数。

    reader.onloadend = () => {
        const base64 = reader.result;
        const bstr = base64.split(',')[1];
        console.log(bstr);
        console.log('this.props', this.props);
        this.props.onSaveAudio(bstr);
    }

this.props 将在这种情况下定义