How to resolve issue of function not recognized in reactjs?

Question

I have a function I am attempting to call in my componentDidMount function. It is function is declared in my mapDispatchToProps function. I am trying to receive variables from the function to display in my render. Instead, I get this error:

TypeError: this.props.pageReload(...).then is not a function

Any advice would help to resolve this issue and hopefully not replicated. I have tried a couple of solutions I ran into but none successful.

Component Level:

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

Actions:

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

Can you share a sandbox?

KT-mongo
– KT-mongo

2019-04-29 18:08:36 +00:00
Commented Apr 29, 2019 at 18:08 — KT-mongo
– KT-mongo, Commented Apr 29, 2019 at 18:08
I am not sure how to set that up.

Paradigm
– Paradigm

2019-04-29 18:11:08 +00:00
Commented Apr 29, 2019 at 18:11 — Paradigm
– Paradigm, Commented Apr 29, 2019 at 18:11
https://codesandbox.io/s/new

KT-mongo
– KT-mongo

2019-04-29 18:13:18 +00:00
Commented Apr 29, 2019 at 18:13 — KT-mongo
– KT-mongo, Commented Apr 29, 2019 at 18:13
codesandbox.io/s/74946z17j0

Paradigm
– Paradigm

2019-04-29 18:35:22 +00:00
Commented Apr 29, 2019 at 18:35 — Paradigm
– Paradigm, Commented Apr 29, 2019 at 18:35
I have another error on there I am working to resolve.

Paradigm
– Paradigm

2019-04-29 18:35:38 +00:00
Commented Apr 29, 2019 at 18:35 — Paradigm
– Paradigm, Commented Apr 29, 2019 at 18:35

Steve K · Accepted Answer · 2019-04-29 18:44:28Z

2

This happens normally when you are not returning a promise from your function. It does't look like your returning a promise from your pageReload() function therefore your .then() is not valid and you are getting the error. Take a look at Javascript Promise.protoype.then() Try something like the following:

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

and then you can use then() like so:

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

Note: this is not tested just assuming that's the issue

answered Apr 29, 2019 at 18:44

Steve K

9,1353 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to resolve issue of function not recognized in reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related