React Native使用Fetch获取API数据后，如何逐个展示数据？

你的代码存在几个关键问题导致数据无法正确渲染，以下是具体修正方案：

1. 初始化状态为数组 #

FlatList要求data属性必须是数组类型，初始值设为null会导致渲染异常，直接改为空数组：

const [data, setData] = useState([]);

2. 修正数据解析与状态更新 #

从代码逻辑看，API返回的是双重JSON嵌套结构（第一次解析得到字符串，第二次解析才是目标数组），因此需要把最终解析后的数组存入状态：

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("http://192.168.1.30:2828/CodesAndroid.svc/CariHesapListesiDetayli", requestOptions);
    const result = await response.text();
    const parsedResult = JSON.parse(result);
    // 第二次解析得到真实数据数组
    const actualData = JSON.parse(parsedResult);
    // 将数组存入状态
    setData(actualData);
  };

  fetchData();
}, []);

3. FlatList渲染单个item #

你当前在renderItem里直接输出整个data数组，需改为渲染单个item的具体字段，比如CariId或接口返回的其他字段：

<View style={{flex:0.5}}>
  <FlatList
        data={data}
        renderItem={({ item }) => (
          <View style={{padding: 10, borderBottomWidth: 1}}>
            {/* 渲染item的具体字段，示例为CariId，可根据实际字段调整 */}
            <Text style={{color:'red'}}>客户ID：{item.CariId}</Text>
            {/* 若接口返回其他字段，比如客户名称，可添加如下代码 */}
            {/* <Text>客户名称：{item.CariAdi}</Text> */}
          </View>
        )}
        keyExtractor={item => item.CariId.toString()} 
        {/* 若CariId是数字类型，转为字符串避免渲染警告 */}
  />
</View>

额外注意： #

• 确保keyExtractor返回的是每个item的唯一标识，若CariId存在重复，需更换其他唯一字段。
• 提前确认接口返回的actualData是标准数组格式，若不是需检查API返回结构是否符合预期。

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