«_this is undefined» ошибка, когда я хочу использовать внешнее ключевое слово «this»

Question

В следующем примере я получил эту ошибку

TypeError: _this не определено

Я пробовал много способов, но не смог найти способ исправить ошибку, как Могу ли я решить эту проблему?

component_for_home_page. js

import { dispatch } from 'dispatch'

class Home extends PureComponent {
    componentDidMount() {
        dispatch('ADD_TEXT', 'Beep, Boop')

        // instead of following
            // this.props.dispatch({
            //     type: 'ADD_TEXT'
            //     text: 'Beep, Boop'
            // })
        //
    }

    render() {
        return (<p>{this.props.text}</p>)
    }
}

function mapStateToProps(state) {
    return {
        ...state
    }
}

const connectedHomeComponent = connect(mapStateToProps)(Home)

export {
    connectedHomeComponent
}

simpify_dispatch. js

const dispatch = (type, text) => {
    return this.props.dispatch({
        type,
        text
    })
}

Answer 1

В simplify_dispatch.js вы пытаетесь получить доступ к this.props, но это не в правильном контексте, поскольку вы хотите, чтобы this было от вашего component_for_home_page. Я не уверен, почему вы не хотите просто использовать this.props.dispatch(...), но если вы настаиваете на следующем подходе, я бы предложил передать третий аргумент вашей функции в simplify_dispatch.js, либо this.props, либо this.props.dispatch

simplify_dispatch.js

const dispatch = (type, text, passedDispatch) => {
    return passedDispatch({
        type,
        text
    })
}

component_for_home_page.js

...
componentDidMount() {
   dispatch('ADD_TEXT', 'Beep, Boop', this.props.dispatch)
}
...