React Promise - TypeError: Cannot read property 'then' of undefined

Question

I'm fetching the data from the following call which returns an object:

function getPersonList() {
        const api = 'myapistring';
        axios.get(api).then(res => {
            console.log(res);
        }).catch(err => console.log(err));
}

1 - However when I hit my componentDidMount. The promise is breaking and I don't know why.

2- Also since the response is an object, am I doing something wrong by setting the initial state to an empty [ ]? -I'm not sure what's the syntax to set it as an object.

const App = React.createClass({
    getInitialState() {
        return {
            personList: [],
            visiblePersonList: []
        };
    },
    componentDidMount() {
         console.log(getPersonList(response));
        getPersonList().then((data) =>
            this.setState({
                data,
                visiblePersonList: data
            }));
        //return getPersonList;
    },
.....

Thank you everyone!

While it's quite safe to provide empty arrays (as []) as initial values that will soon be objects, it's better to assign them with empty objects: {}. See docs. — rishat
@RishatMuhametshin that doesn't make sense those sounds like they should be arrays with the suffix List. — Daniel A. White
@DanielA.White what would be the correct syntax for array + suffix list? — Jonca33

Daniel A. White Daniel A. White · Accepted Answer · 2017-08-07T19:43:10

You aren't returning anything out of getPersonList

function getPersonList() {
    const api = 'myapistring';
    return axios.get(api).then(res => {  // FIX THIS LINE WITH return
        console.log(res);
    }).catch(err => console.log(err));
}

React Promise - TypeError: Cannot read property 'then' of undefined

1 Answers