реагировать на аксиос - потерять этот контекст, несмотря на использование функций стрелок

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