Как решить проблему с функцией, не распознаваемой в реагировании?

Question

У меня есть функция, которую я пытаюсь вызвать в моей функции componentDidMount. Это функция объявлена ​​в моей функции mapDispatchToProps. Я пытаюсь получить переменные из функции для отображения в моем рендере. Вместо этого я получаю эту ошибку:

TypeError: this.props.pageReload (...). Затем не является функцией

Любой совет поможет решить эту проблему и, надеюсь, не будет воспроизведен. Я испробовал несколько решений, с которыми столкнулся, но ни одно из них не принесло успеха.

Уровень компонента:

import React from 'react';
import { connect } from 'react-redux';
import { Collapse, Container, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';
import { userActions } from '../../../../actions/user.actions';

class InnerHeaderComponent extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
            First: "",
            Last: ""
        };
        this.toggle = this.toggle.bind(this);
    }
    componentDidMount() {      
        this.props.pageReload()
            .then((res) => {
                this.setState({
                    First: res.FirstName,
                    Last: res.LastName
                });   
            });                    

    }
 render() {
  return();
}
function mapStateToProps(state) {

    const { authentication } = state;
    const { user } = authentication;

        return {
        user
    };
}
const mapDispatchToProps = dispatch => ({
    pageReload: () => dispatch(userActions.pageReload())
});
export default connect(mapStateToProps, mapDispatchToProps)(InnerHeaderComponent);

Действия:

function pageReload() {
    return dispatch => {        
        const user = JSON.parse(localStorage.getItem('user'));        
        userService._setUserSession(user);
        dispatch({ type: userConstants.LOGIN_SUCCESS, user });
        console.log(user);
        return { FirstName: user.FirstName, LastName: user.LastName };
    };
}

Answer 1

Обычно это происходит, когда вы не возвращаете обещание из своей функции. Это не похоже на то, что вы возвращаете обещание из функции pageReload(), поэтому ваш .then() недействителен и вы получаете ошибку. Взгляните на Javascript Promise.protoype.then () Попробуйте что-то вроде следующего:

function pageReload() {
    return dispatch => {        
        const user = JSON.parse(localStorage.getItem('user'));        
        userService._setUserSession(user);
        dispatch({ type: userConstants.LOGIN_SUCCESS, user });
        return Promise.resolve(user)
    };
}

и затем вы можете использовать then() примерно так:

this.props.pageReload()
.then(user => {
  console.log(user)
});

Примечание: это не проверяется, только если предположить, что это проблема