React Native传递API响应数据遇状态设置报错，求解决方案

1. 正确封装接口服务（a.js） #

不管用fetch还是axios，封装时要做好数据校验与兜底，避免后端返回异常导致组件报错。

Axios封装示例 #

// a.js
import axios from 'axios';

export const fetchDataList = async () => {
  try {
    const response = await axios.get('你的接口URL');
    // 校验返回结构，确保拿到的是数组
    if (response.data && Array.isArray(response.data.data)) {
      return response.data.data;
    }
    return []; // 兜底返回空数组
  } catch (error) {
    console.error('接口请求失败:', error);
    return []; // 异常时返回空数组，避免组件崩溃
  }
};

Fetch封装示例 #

// a.js
export const fetchDataList = async () => {
  try {
    const response = await fetch('你的接口URL');
    const result = await response.json();
    if (result && Array.isArray(result.data)) {
      return result.data;
    }
    return [];
  } catch (error) {
    console.error('接口请求失败:', error);
    return [];
  }
};

2. 在组件b.js中调用接口并渲染列表 #

核心是保证state初始值为数组，异步请求时正确更新状态，避免数据格式不匹配引发报错。

函数组件示例 #

// b.js
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import { fetchDataList } from './a';

const DataListComponent = () => {
  // 初始值设为空数组，避免渲染时因非数组类型报错
  const [dataList, setDataList] = useState([]);

  useEffect(() => {
    const loadData = async () => {
      const list = await fetchDataList();
      // 直接将接口返回的数组设置到state
      setDataList(list);
    };
    loadData();
  }, []);

  // 列表项渲染函数
  const renderItem = ({ item }) => (
    <View style={{ padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee' }}>
      <Text>ID: {item.id}</Text>
      <Text>名称: {item.name}</Text>
    </View>
  );

  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={dataList}
        keyExtractor={(item) => item.id.toString()}
        renderItem={renderItem}
        // 空数据时的占位提示
        ListEmptyComponent={<Text style={{ textAlign: 'center', marginTop: 20 }}>暂无数据</Text>}
      />
    </View>
  );
};

export default DataListComponent;

3. 常见报错排查点 #

• State初始值错误：如果初始state设为null或undefined，设置数组时可能触发渲染报错，必须初始化为[]。
• 接口返回异常：后端偶尔返回非预期结构（比如response.data.data不是数组）时，封装层的兜底处理能避免组件崩溃。
• 异步请求未捕获异常：必须加try/catch，防止请求失败时未处理的Promise报错中断state更新。

内容的提问来源于stack exchange，提问作者furkan aydınlı