React Native中FlatList无法渲染问题求助

核心问题与修复步骤 #

1. 变量顺序与 useEffect 依赖错误 #

原代码中file在useEffect之后声明，导致useEffect执行时file未定义；同时依赖数组为空，无法响应路由参数的变化。

修复后代码：

function Assessments ({route,navigation}) {
  // 先获取路由参数
  const { file } = route.params;
  const [data,setData] = useState([]);

  useEffect(()=>{
    // 先判断参数是否存在，避免空值请求
    if (file) {
      fetchData(file);
    }
  },[file]); // 将file加入依赖，参数变化时重新触发请求

2. 接口请求未携带ID参数 #

原代码中接口地址未使用传入的file（即ID）拼接，导致请求的接口无法返回对应数据。

修复后 fetchData 函数：

const fetchData = async (file) => {
  try {
    // 用file拼接接口地址，替换成你的实际接口路径
    const response = await axios.get(`你的接口地址/${file}`);
    console.log(response.data);
    // 接口返回单个对象，需转为数组适配FlatList
    setData([response.data]);
  } catch (error) {
    console.log(error);
  }
}

若接口后续可能返回数组，可兼容处理：setData(Array.isArray(response.data) ? response.data : [response.data])

3. renderItem 函数未返回JSX #

原showdata函数未返回JSX结构，导致FlatList渲染item时无内容输出。

修复后 showdata 函数：

const showdata = ({item}) => {
  return (
    <View style={{padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee'}}>
      <Text>ID: {item.id}</Text>
      <Text>名称: {item.name}</Text>
    </View>
  );
}

4. FlatList 缺少 keyExtractor 属性 #

FlatList必须指定唯一标识item的key，否则会引发性能问题与渲染警告。

修复后 FlatList：

<FlatList 
  flexGrow={0}
  minHeight='20%'
  maxHeight='80%'
  data={data}
  renderItem={showdata}
  // 用接口返回的id作为唯一key
  keyExtractor={(item) => item.id.toString()}
/>

完整修复后代码示例 #

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import axios from 'axios';

function Assessments ({route,navigation}) {
  const { file } = route.params;
  const [data,setData] = useState([]);

  useEffect(()=>{
    if (file) {
      fetchData(file);
    }
  },[file]);

  const fetchData = async (file) => {
    try {
      const response = await axios.get(`你的接口地址/${file}`);
      console.log(response.data);
      setData(Array.isArray(response.data) ? response.data : [response.data]);
    } catch (error) {
      console.log(error);
    }
  }

  const showdata = ({item}) => {
    return (
      <View style={{padding: 16, borderBottomWidth: 1, borderBottomColor: '#eee'}}>
        <Text>ID: {item.id}</Text>
        <Text>名称: {item.name}</Text>
      </View>
    );
  }

  return (
    <View style={{flex: 1, paddingTop: 20}}>
      <Text>okay</Text>
      <FlatList 
        flexGrow={0}
        minHeight='20%'
        maxHeight='80%'
        data={data}
        renderItem={showdata}
        keyExtractor={(item) => item.id.toString()}
      />
    </View>
  );
}

export default Assessments;

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