React Native：如何等待数据加载完成后再渲染页面？

你当前的页面空白问题核心是异步请求的时序错误+代码逻辑漏洞：组件先渲染（此时数据未返回，state为初始值），但你既没处理加载状态，还存在fetchData调用方式错误的问题，导致请求完成后根本没更新state，同时直接访问未加载完成的属性还会触发隐性报错。

核心问题拆解 #

1. fetchData调用错误：你的fetchData是高阶函数（先接收dispatch，再返回请求函数），但你在useEffect里直接调用fetchData(id)，相当于把id当成了dispatch传入，请求完成后根本不会触发state更新。
2. 无加载/错误状态：初始state没有加载标识，第一次渲染时state.dataDetails为undefined，头部文本不显示；同时FlatList直接取state.dataDetails.Tracks会触发Cannot read property 'Tracks' of undefined错误，导致页面空白。
3. 异步代码风格混乱：混用await和.then()，增加代码维护难度。

分步解决方案 #

1. 修正fetchData的调用逻辑

在组件内先传入dispatch拿到真正的请求函数，再调用：

const [state, dispatch] = useReducer(yourReducer, initialState);

// 绑定dispatch到fetchData
const fetchDataWithDispatch = fetchData(dispatch);

useEffect(() => {
  fetchDataWithDispatch(id);
}, [id]); // 把id加入依赖数组，避免闭包导致的旧值问题

或者直接在useEffect内链式调用：

useEffect(() => {
  fetchData(dispatch)(id);
}, [id, dispatch]);

2. 给Reducer添加加载与错误状态

先修改初始state：

const initialState = {
  isLoading: true,
  error: null,
  dataDetails: null,
  dataTracks: null,
  isAuth: false
};

再更新Reducer处理加载、错误动作：

const yourReducer = (state, action) => {
  switch(action.type) {
    case 'LOADING':
      return {...state, isLoading: true, error: null};
    case 'ERROR':
      return {...state, isLoading: false, error: action.payload};
    case 'dataDetails':
      return {...state, dataDetails: action.payload};
    case 'dataTracks':
      return {...state, dataTracks: action.payload};
    case 'isAuth':
      return {...state, isAuth: action.payload, isLoading: false}; // 请求完成后关闭加载状态
    default:
      return state;
  }
};

3. 优化fetchData的异步逻辑

统一用try/catch处理请求，添加加载和错误捕获：

const fetchData = dispatch => async props => {
  const id = props;
  try {
    dispatch({type: 'LOADING'}); // 请求开始时标记加载中
    const res = await axios.get(`${URL}?id=${id}`);
    const data = res.data;

    const isAuth = data[0].isAuth;
    const dataDetails = data[1].dataDetails;
    const dataTracks = data[2].dataTracks;

    dispatch({type: 'dataDetails', payload: dataDetails});
    dispatch({type: 'dataTracks', payload: dataTracks});
    dispatch({type: 'isAuth', payload: isAuth});
  } catch (err) {
    dispatch({type: 'ERROR', payload: err.message}); // 捕获请求错误
  }
};

4. 修改渲染逻辑，按状态展示内容

根据加载、错误、完成三种状态分别渲染：

import { ActivityIndicator } from 'react-native';

return (
  <SafeAreaView style={{flex:1}}>
    {state.isLoading ? (
      // 加载中显示加载指示器
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    ) : state.error ? (
      // 加载失败显示错误信息
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text>加载失败：{state.error}</Text>
      </View>
    ) : (
      // 数据加载完成后渲染内容
      <>
        <View style={{padding:16}}>
          {state.dataDetails && (
            <Text>{'@' + state.dataDetails.username}</Text>
          )}
        </View>
        <View style={{flex:1}}>
          <FlatList
            data={state.dataTracks || []} // 用请求回来的dataTracks，避免访问undefined属性
            ListHeaderComponent={<DataDetails />}
            renderItem={({item}) => <PostTracks item={item} />}
            keyExtractor={(item) => item.id?.toString()} // 必须添加keyExtractor，避免警告
          />
        </View>
      </>
    )}
  </SafeAreaView>
);

额外注意点 #

• 如果你的Tracks确实是dataDetails下的属性，要改成state.dataDetails?.Tracks || []，用可选链避免undefined报错。
• React 18+中dispatch是稳定值，可不用加入useEffect依赖数组，但低版本建议加上。

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