React Native使用fetch获取API数据 控制台可打印但移动端无法展示

问题原因 #

• fetch属于异步操作，你定义的getMoviesFromApi函数执行后返回的是Promise对象，不是接口实际返回的数据，直接渲染只会展示Promise对象相关内容
• React函数组件中只有存在状态（state）中的数据更新时，才会触发界面重新渲染，你用普通变量存储数据，就算后续拿到了接口返回值，界面也不会更新
• 你没有在合适的生命周期触发请求，直接在组件顶层调用请求会导致每次组件渲染都重复发送接口请求

修正后的代码 #

import React, { useState, useEffect } from 'react'
import { StyleSheet, Text, SafeAreaView} from 'react-native'

const App = () => {
  // 声明状态存储接口返回数据、加载状态
  const [movies, setMovies] = useState(null)
  const [loading, setLoading] = useState(true)

  const getMoviesFromApi = async () => {
    try {
      const response = await fetch('https://reactnative.dev/movies.json', {
        method: 'GET',
      })
      const responseJson = await response.json()
      setMovies(responseJson)
    } catch (error) {
      console.error('请求出错：', error)
    } finally {
      setLoading(false)
    }
  }

  // 组件挂载时执行一次请求
  useEffect(() => {
    getMoviesFromApi()
  }, [])

  return (
    <SafeAreaView style={styles.container}>
      {loading ? (
        <Text>加载中...</Text>
      ) : (
        <>
          <Text>接口返回数据：{JSON.stringify(movies)}</Text>
          {/* 也可以遍历展示电影列表 */}
          <Text style={styles.title}>电影列表：</Text>
          {movies.movies.map((item, index) => (
            <Text key={index}>{item.title} - {item.releaseYear}</Text>
          ))}
        </>
      )}
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    padding: 16
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    marginVertical: 12
  }
})

export default App

改动说明 #

• 引入了React内置的useState和useEffect钩子，useState用来存储响应式数据，useEffect用来控制请求的触发时机
• 使用async/await改写了异步请求逻辑，代码可读性更高，请求成功后调用setMovies更新状态，自动触发界面重新渲染
• 增加了加载状态提示，同时新增了错误捕获逻辑避免请求异常导致程序崩溃
• 新增了电影列表遍历展示的示例代码，你可以根据需求调整展示样式

内容的提问来源于stack exchange，提问作者Bad Coder