javascript - Cannot read property 'then' of undefined - Stack Overflow

admin管理员组

文章数量:1026989

So I'm using react + redux, and I'm continuing to get the following error: "Cannot read property 'then' of undefined". For some reason the promise isn't being returned. I'm also particularly new to using redux thunk.

Reducer

import { merge } from 'lodash';
import  * as APIutil  from '../util/articles_api_util';


import {
  ArticleConstants
} from '../actions/article_actions';

const ArticlesReducer = (state = {}, action) => {
  switch (action.type) {
    case ArticleConstants.RECEIVE_ALL_ARTICLES:
    debugger
    return merge({}, action.articles);
    default:
      return state;
  }
};

export default ArticlesReducer;

Store

import { createStore, applyMiddleware } from 'redux';
import RootReducer from '../reducers/root_reducer';
import thunk from 'redux-thunk';

import  * as APIUtil  from '../util/articles_api_util';

export const ArticleConstants = {
    RECEIVE_ALL_ARTICLES: "RECEIVE_ALL_ARTICLES",
    REQUEST_ALL_ARTICLES: "REQUEST_ALL_ARTICLES"
}

Actions

export function fetchArticles() {
  return function(dispatch) {
    return APIUtil.fetchArticles().then(articles => {
      dispatch(receiveAllArticles(articles));
    }).catch(error => {
      throw(error);
    });
  };
}


export const requestAllArticles= () => ({
    type: REQUEST_ALL_ARTICLES
});


export const receiveAllArticles = articles => ({
    type: RECEIVE_ALL_ARTICLES,
    articles
});

    const configureStore = (preloadedState = {}) => (
      createStore(
        RootReducer,
        preloadedState,
        applyMiddleware(thunk)
      )
    );


    export default configureStore;

APIUtil

export const fetchArticles = (success) => {
  $.ajax({
        method: 'GET',
        url: `/api/articles`,
        success,
        error: ()=> (
        console.log("Invalid Article")
      )
    });
};

So I'm using react + redux, and I'm continuing to get the following error: "Cannot read property 'then' of undefined". For some reason the promise isn't being returned. I'm also particularly new to using redux thunk.

Reducer

import { merge } from 'lodash';
import  * as APIutil  from '../util/articles_api_util';


import {
  ArticleConstants
} from '../actions/article_actions';

const ArticlesReducer = (state = {}, action) => {
  switch (action.type) {
    case ArticleConstants.RECEIVE_ALL_ARTICLES:
    debugger
    return merge({}, action.articles);
    default:
      return state;
  }
};

export default ArticlesReducer;

Store

import { createStore, applyMiddleware } from 'redux';
import RootReducer from '../reducers/root_reducer';
import thunk from 'redux-thunk';

import  * as APIUtil  from '../util/articles_api_util';

export const ArticleConstants = {
    RECEIVE_ALL_ARTICLES: "RECEIVE_ALL_ARTICLES",
    REQUEST_ALL_ARTICLES: "REQUEST_ALL_ARTICLES"
}

Actions

export function fetchArticles() {
  return function(dispatch) {
    return APIUtil.fetchArticles().then(articles => {
      dispatch(receiveAllArticles(articles));
    }).catch(error => {
      throw(error);
    });
  };
}


export const requestAllArticles= () => ({
    type: REQUEST_ALL_ARTICLES
});


export const receiveAllArticles = articles => ({
    type: RECEIVE_ALL_ARTICLES,
    articles
});

    const configureStore = (preloadedState = {}) => (
      createStore(
        RootReducer,
        preloadedState,
        applyMiddleware(thunk)
      )
    );


    export default configureStore;

APIUtil

export const fetchArticles = (success) => {
  $.ajax({
        method: 'GET',
        url: `/api/articles`,
        success,
        error: ()=> (
        console.log("Invalid Article")
      )
    });
};

• javascript
• redux
• react-redux
• redux-thunk

Share Improve this question Follow edited Dec 28, 2016 at 9:13 acampbe222 asked Dec 28, 2016 at 8:30 acampbe222acampbe222 8322 silver badges1212 bronze badges 5

• 1 Can you also share APIUtil.fetchArticles method – Swapnil Commented Dec 28, 2016 at 8:53
• @Swapnil I've added APIUtil – acampbe222 Commented Dec 28, 2016 at 9:13
• Did you try using .done in place of .then – Swapnil Commented Dec 28, 2016 at 10:32
• I get the same undefined error, but instead of .then it's now for .done – acampbe222 Commented Dec 28, 2016 at 15:17
• Very Simple Solution : update your file and try to use updated sweetalert.min.js . i was facing same but after update i fix it. sweetalert.js/guides/#installation – pankaj Commented Dec 21, 2020 at 9:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Arrow functions only do implicit returns if you leave off the curly braces. As soon as you include curly braces, you have defined a function body, and need to explicitly return a value.

Your fetchArticles function is written as an arrow function with curly braces. However, you are not explicitly returning the result of the $.ajax() call. So, the return value of the function is undefined, and there's no promise returned that you can chain off of.

So I'm using react + redux, and I'm continuing to get the following error: "Cannot read property 'then' of undefined". For some reason the promise isn't being returned. I'm also particularly new to using redux thunk.

Reducer

import { merge } from 'lodash';
import  * as APIutil  from '../util/articles_api_util';


import {
  ArticleConstants
} from '../actions/article_actions';

const ArticlesReducer = (state = {}, action) => {
  switch (action.type) {
    case ArticleConstants.RECEIVE_ALL_ARTICLES:
    debugger
    return merge({}, action.articles);
    default:
      return state;
  }
};

export default ArticlesReducer;

Store

import { createStore, applyMiddleware } from 'redux';
import RootReducer from '../reducers/root_reducer';
import thunk from 'redux-thunk';

import  * as APIUtil  from '../util/articles_api_util';

export const ArticleConstants = {
    RECEIVE_ALL_ARTICLES: "RECEIVE_ALL_ARTICLES",
    REQUEST_ALL_ARTICLES: "REQUEST_ALL_ARTICLES"
}

Actions

export function fetchArticles() {
  return function(dispatch) {
    return APIUtil.fetchArticles().then(articles => {
      dispatch(receiveAllArticles(articles));
    }).catch(error => {
      throw(error);
    });
  };
}


export const requestAllArticles= () => ({
    type: REQUEST_ALL_ARTICLES
});


export const receiveAllArticles = articles => ({
    type: RECEIVE_ALL_ARTICLES,
    articles
});

    const configureStore = (preloadedState = {}) => (
      createStore(
        RootReducer,
        preloadedState,
        applyMiddleware(thunk)
      )
    );


    export default configureStore;

APIUtil

export const fetchArticles = (success) => {
  $.ajax({
        method: 'GET',
        url: `/api/articles`,
        success,
        error: ()=> (
        console.log("Invalid Article")
      )
    });
};

So I'm using react + redux, and I'm continuing to get the following error: "Cannot read property 'then' of undefined". For some reason the promise isn't being returned. I'm also particularly new to using redux thunk.

Reducer

import { merge } from 'lodash';
import  * as APIutil  from '../util/articles_api_util';


import {
  ArticleConstants
} from '../actions/article_actions';

const ArticlesReducer = (state = {}, action) => {
  switch (action.type) {
    case ArticleConstants.RECEIVE_ALL_ARTICLES:
    debugger
    return merge({}, action.articles);
    default:
      return state;
  }
};

export default ArticlesReducer;

Store

import { createStore, applyMiddleware } from 'redux';
import RootReducer from '../reducers/root_reducer';
import thunk from 'redux-thunk';

import  * as APIUtil  from '../util/articles_api_util';

export const ArticleConstants = {
    RECEIVE_ALL_ARTICLES: "RECEIVE_ALL_ARTICLES",
    REQUEST_ALL_ARTICLES: "REQUEST_ALL_ARTICLES"
}

Actions

export function fetchArticles() {
  return function(dispatch) {
    return APIUtil.fetchArticles().then(articles => {
      dispatch(receiveAllArticles(articles));
    }).catch(error => {
      throw(error);
    });
  };
}


export const requestAllArticles= () => ({
    type: REQUEST_ALL_ARTICLES
});


export const receiveAllArticles = articles => ({
    type: RECEIVE_ALL_ARTICLES,
    articles
});

    const configureStore = (preloadedState = {}) => (
      createStore(
        RootReducer,
        preloadedState,
        applyMiddleware(thunk)
      )
    );


    export default configureStore;

APIUtil

export const fetchArticles = (success) => {
  $.ajax({
        method: 'GET',
        url: `/api/articles`,
        success,
        error: ()=> (
        console.log("Invalid Article")
      )
    });
};

• javascript
• redux
• react-redux
• redux-thunk

Share Improve this question Follow edited Dec 28, 2016 at 9:13 acampbe222 asked Dec 28, 2016 at 8:30 acampbe222acampbe222 8322 silver badges1212 bronze badges 5

• 1 Can you also share APIUtil.fetchArticles method – Swapnil Commented Dec 28, 2016 at 8:53
• @Swapnil I've added APIUtil – acampbe222 Commented Dec 28, 2016 at 9:13
• Did you try using .done in place of .then – Swapnil Commented Dec 28, 2016 at 10:32
• I get the same undefined error, but instead of .then it's now for .done – acampbe222 Commented Dec 28, 2016 at 15:17
• Very Simple Solution : update your file and try to use updated sweetalert.min.js . i was facing same but after update i fix it. sweetalert.js/guides/#installation – pankaj Commented Dec 21, 2020 at 9:25

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Arrow functions only do implicit returns if you leave off the curly braces. As soon as you include curly braces, you have defined a function body, and need to explicitly return a value.

Your fetchArticles function is written as an arrow function with curly braces. However, you are not explicitly returning the result of the $.ajax() call. So, the return value of the function is undefined, and there's no promise returned that you can chain off of.

本文标签： javascriptCannot read property 39then39 of undefinedStack Overflow