javascript - React axios - 尽管使用箭头函数但仍丢失此上下文

Question

我的组件中有这个函数来发布数据。这工作正常，但在成功消息中，我的组件的 this 上下文丢失了。为什么？我正在使用箭头函数。为什么 this 上下文会以这种方式丢失？问题是如果发布成功，则调用函数 this.props.onUpdate();。

handlePriceUpdateClickConfirm(event) {
    event.preventDefault();
    axios.post('../data/post/json/massUpdatePrices', {
        _token : window.Laravel.csrfToken,
        percent: this.refs.percent.value,
        IDs: this.props.selectedFreights,
    })
    .then((response) => {
        console.log(response);
        if(response.data != undefined && response.data != null && response.data.success == true) {
            this.props.onUpdate();
        }
    })
    .catch(function (error) {
        console.log(error);
    });
}

Answer 1

因为主函数handlePriceUpdateClickConfirm未绑定(bind)到类本身，因为它不是箭头函数(我想也没有绑定(bind))，并且所有函数都获得与此函数相同的上下文。

您可以通过将函数声明更改为以下内容来解决该问题。我还建议解构您的 props 以保留在函数范围内声明的变量:

handlePriceUpdateClickConfirm = event => {
    const { onUpdate } = this.props
    /* */
    if(response.data && response.data && response.data.success) {
        onUpdate();
    }
}