React Native + Fetch => TypeError：无法读取未定义的属性'then'

Question

我使用 CRNA 设置了一个 React Native 项目，并且我正在使用 fetch 从这样的 API 返回数据（已删除密钥，url 返回正确的数据，例如在浏览器中使用我的 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
    })
}

我已经测试并且控制台记录了最后一行的输出，console.log(news.sources) 为我提供了一个数组上 134 个项目的正确视图，正如我所期望的那样。

然后，我尝试在我的组件componentDidMount 方法中使用 API：

state = { news: '' }

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

我遇到了标题的错误消息。这是 chrome 中显示的完整错误消息（注意：我觉得这有点奇怪，我首先收到 .then 错误，但我可以清楚地看到在我的错误堆栈底部，获取成功并记录了输出我希望在 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

您在 getNews 函数中 fetch 之前忘记了返回