React Native：FlatList渲染API返回对象数组数据异常解决

Console能输出正确数据但组件显示默认值，说明数据传递链路、组件渲染触发逻辑或字段映射存在问题，按以下步骤逐一排查：

1. 检查SubCategoryInfoCard的props传递与字段映射 #

• 避免组件硬编码默认值，确保通过props接收数据（默认值仅作为兜底）：
  错误写法（硬编码占位值，永远显示默认内容）：

  // SubCategoryInfoCard.js
  const SubCategoryInfoCard = () => {
    return <Text>Zoogdieren</Text>;
  };
  

  正确写法：

  const SubCategoryInfoCard = ({ name = "Zoogdieren", images = defaultImageUri }) => {
    return (
      <View>
        <Text>{name}</Text>
        <Image source={{ uri: images }} />
      </View>
    );
  };
  

• 严格核对API返回字段名与props的匹配：比如API返回category_name而非name，则传递时需做映射：name={item.category_name}

2. 确认CategoryList封装的FlatList正确透传数据 #

检查封装的CategoryList是否将子分类项完整传递给SubCategoryInfoCard：

// CategoryList.js
const CategoryList = ({ data, renderItem }) => {
  return (
    <FlatList
      data={data}
      renderItem={({ item }) => renderItem(item)} // 确保透传每一项数据
      keyExtractor={(item) => item.id.toString()}
    />
  );
};

// 在SubCategoryScreen中使用
<CategoryList
  data={subCategoryList}
  renderItem={(item) => <SubCategoryInfoCard name={item.name} images={item.images} />}
/>

如果CategoryList内置了SubCategoryInfoCard，需确认它是否正确使用了data中的字段。

3. 验证Context状态更新是否触发组件重渲染 #

• 确保subCategoryList是通过useState声明的状态变量，而非普通变量：

  // CategoryContextProvider.js
  const [subCategoryList, setSubCategoryList] = useState([]);
  
  const fetchData = async () => {
    const res = await fetchSubCategoryData();
    setSubCategoryList(res.data); // 用setter更新状态，触发组件重渲染
    // 错误写法：subCategoryList = res.data; 直接赋值不会触发重渲染
  };
  

• 在SubCategoryScreen中监听状态变化，确认更新后组件会重新渲染：

  useEffect(() => {
    console.log("状态更新后的子分类数据：", subCategoryList);
  }, [subCategoryList]);
  

4. 排查初始值覆盖或条件渲染逻辑 #

• 确认SubCategoryInfoCard的默认值仅在props未传入时生效：如果API返回的name为null或空字符串，默认值会生效，可在传递时做处理：name={item.name || "默认名称"}
• 检查是否存在条件渲染逻辑错误：比如误将“数据加载完成”的判断写反，导致真实数据无法显示。

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