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没有绑定到类本身，因为它不是箭头函数（我想是没有约束），并且所有函数都具有与此相同的上下文。

您可以通过将函数声明更改为以下内容来解决此问题。我也建议您解构道具，以使变量保持在函数范围内：

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

反应axios-尽管使用了箭头功能，但仍丢失了此上下文

1 个答案: