React Native中如何获取API返回结果并渲染到UI界面？

你现在的写法存在两个核心问题导致无法拿到数据渲染：

• fetch是异步操作，组件顶层直接调用fetch时，等接口返回数据的节点组件已经完成首次渲染，return语句早就执行完毕，无法拿到异步返回的结果
• lessonName和lessonDesc是fetch回调函数内的局部变量，作用域仅在回调内部，组件渲染逻辑无法访问该作用域下的变量

解决方案 #

你需要使用React提供的useState存储响应式数据，配合useEffect控制接口请求时机，修改后的完整代码如下：

import { useState, useEffect } from 'react'
import { View, Text, StatusBar, StyleSheet } from 'react-native'

// 替换为你实际的接口地址
const contentURL = '你的接口请求地址'

export default function App() {
  // 定义响应式状态存储接口返回数据
  const [lessonData, setLessonData] = useState({
    lessonName: '',
    lessonDesc: ''
  })
  // 可选加载状态，避免数据未返回时渲染异常
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    // 接口请求放在useEffect中，空依赖数组保证仅组件初始化时请求一次
    fetch(contentURL)
      .then((response) => response.json())
      .then((json) => {
        const { lessonName, lessonDesc } = json.fields
        // 数据存入状态，会自动触发组件重新渲染
        setLessonData({ lessonName, lessonDesc })
        setLoading(false)
      })
      .catch((error) => {
        console.error(error)
        setLoading(false)
      })
  }, [])

  // 加载中兜底展示
  if (loading) {
    return (
      <View style={styles.container}>
        <Text>加载中...</Text>
      </View>
    )
  }

  return (
    <View style={styles.container}>
      <Text>课程名称：{lessonData.lessonName}</Text>
      <Text>课程描述：{lessonData.lessonDesc}</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    justifyContent: 'center'
  }
})

核心逻辑说明 #

1. useState是React函数组件专门用来存储响应式数据的API，修改状态时会自动触发组件重新渲染，渲染逻辑可以直接读取最新的状态值
2. useEffect用来处理接口请求这类副作用，空依赖数组可以保证接口仅在组件第一次挂载完成后调用一次，不会重复触发请求
3. 加载状态作为兜底逻辑，可以避免接口返回前渲染undefined导致的空白或异常报错

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