React Native + Fetch => TypeError: Cannot read property 'then' of undefined

Question

I setup a React Native project using CRNA and I'm using fetch to return data from an API like this (key removed, the url returns correct data e.g. in browser with my api-key):

export const getNews = () => { 
  fetch('https://newsapi.org/v2/sources?apiKey=xxx')
    .then(res => res.json())
    .then(news => {
      console.log(news.sources)
      return news.sources
    })
}

I have tested and console logged the output of the last then line and console.log(news.sources) gives me a correct view of 134 items on an array as I would expect.

Then, I try to consume the API in my components componentDidMount method:

state = { news: '' }

componentDidMount() {
  NewsAPI.getNews()
    .then(news => {
      this.setState({
        news
      })
    })
}

where I run onto the Title's error message. Here is the full error message displayed in chrome (NOTE: I find it a bit odd, that I get .then error first but I can clearly see that at the bottom of my error stack, the fetch was successful and it logged the output that I would expect to be handled in componentDidMount().)

D:\test\node_modules\react-native\Libraries\Core\ExceptionsManager.js:65 TypeError: Cannot read property 'then' of undefined

This error is located at:
    in Channel (at SceneView.js:32)
    in SceneView (at CardStack.js:399)
    in RCTView (at View.js:113)
    in View (at CardStack.js:398)
    in RCTView (at View.js:113)
    in View (at CardStack.js:397)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:440)
    in RCTView (at View.js:113)
    in View (at CardStack.js:370)
    in RCTView (at View.js:113)
    in View (at CardStack.js:369)
    in CardStack (at CardStackTransitioner.js:103)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:55)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at App.js:8)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:113)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:36)
    in RootErrorBoundary (at registerRootComponent.js:35)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
MessageQueue.callFunctionReturnFlushedQueue @ D:\test\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:107
(anonymous) @ debuggerWorker.js:72
D:\test\node_modules\react-native\Libraries\Core\ExceptionsManager.js:65 TypeError: Cannot read property 'then' of undefined

This error is located at:
    in Channel (at SceneView.js:32)
    in SceneView (at CardStack.js:399)
    in RCTView (at View.js:113)
    in View (at CardStack.js:398)
    in RCTView (at View.js:113)
    in View (at CardStack.js:397)
    in RCTView (at View.js:113)
    in View (at createAnimatedComponent.js:134)
    in AnimatedComponent (at Card.js:26)
    in Card (at PointerEventsContainer.js:55)
    in Container (at CardStack.js:440)
    in RCTView (at View.js:113)
    in View (at CardStack.js:370)
    in RCTView (at View.js:113)
    in View (at CardStack.js:369)
    in CardStack (at CardStackTransitioner.js:103)
    in RCTView (at View.js:113)
    in View (at Transitioner.js:187)
    in Transitioner (at CardStackTransitioner.js:55)
    in CardStackTransitioner (at StackNavigator.js:48)
    in Unknown (at createNavigator.js:48)
    in Navigator (at createNavigationContainer.js:205)
    in NavigationContainer (at App.js:8)
    in App (created by AwakeInDevApp)
    in RCTView (at View.js:113)
    in View (created by AwakeInDevApp)
    in AwakeInDevApp (at registerRootComponent.js:36)
    in RootErrorBoundary (at registerRootComponent.js:35)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:113)
    in View (at AppContainer.js:126)
    in AppContainer (at renderApplication.js:34)
handleException @ D:\test\node_modules\react-native\Libraries\Core\ExceptionsManager.js:65
handleError @ D:\test\node_modules\react-native\Libraries\Core\InitializeCore.js:106
reportFatalError @ D:\test\node_modules\react-native\Libraries\polyfills\error-guard.js:46
__guard @ D:\test\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:271
MessageQueue.callFunctionReturnFlushedQueue @ D:\test\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:107
(anonymous) @ debuggerWorker.js:72

D:\test\src\utils\NewsAPI.js:14 (134) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}

Answer 1

You forgot a return before fetch in your getNews function