React Native中FlatList嵌套对象访问问题咨询

错误信息翻译 #

原错误：undefined is not an object (evaluating route.data.message)
→ "未定义不是对象（计算route.data.message时）"

核心问题 #

你犯了两个关键错误：

1. 错误尝试访问route.data.message，但route中根本不存在data属性，你要展示的内容来自information数组的嵌套结构。
2. 当前FlatList的数据源是外层的information数组，但每个元素下还有子数组data，你没有正确处理这种嵌套结构的渲染。

解决方案 #

方案1：展平嵌套数组，直接渲染所有条目 #

如果不需要按用户分组，先把嵌套的data数组展平成一维数组，让FlatList直接渲染：

const Owe = ({navigation, route}) => {
  // 展平嵌套的data数组
  const flatData = information.flatMap(item => item.data);
  
  return (
    <SafeAreaView>
      <FlatList
        data={flatData}
        renderItem={({item}) => 
        <View style={flatListStyle.container}>
          <Text style={titleBar.Text}>{item.message}</Text>
        </View>}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

var information = [
  {nme:"Joe", data: [
    {owed:true, amount: 10, message:"Beer Money"},
    {owed:false,amount: 5, message:"Lunch"}
  ]},
  {nme:"Ben", data:[
    {owed:true, amount: 50, message:"Broke bitch"},
    {owed:false, amount: 12.50, message:"Milk"}
  ]}
];

方案2：嵌套渲染，按用户分组展示 #

如果需要保留用户分组的结构，在外层FlatList渲染每个用户，内层再用FlatList渲染该用户的所有明细：

const Owe = ({navigation, route}) => {
  return (
    <SafeAreaView>
      <FlatList
        data={information}
        renderItem={({item}) => 
        <View style={flatListStyle.userContainer}>
          <Text style={titleBar.userName}>{item.nme}</Text>
          {/* 内层FlatList渲染当前用户的所有data条目 */}
          <FlatList
            data={item.data}
            renderItem={({item: subItem}) => 
            <View style={flatListStyle.itemContainer}>
              <Text style={titleBar.Text}>{subItem.message}</Text>
            </View>}
            keyExtractor={(subItem, index) => index.toString()}
            nestedScrollEnabled={true}
          />
        </View>}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

var information = [
  {nme:"Joe", data: [
    {owed:true, amount: 10, message:"Beer Money"},
    {owed:false,amount: 5, message:"Lunch"}
  ]},
  {nme:"Ben", data:[
    {owed:true, amount: 50, message:"Broke bitch"},
    {owed:false, amount: 12.50, message:"Milk"}
  ]}
];

重要提示 #

• 必须给FlatList添加keyExtractor属性，避免性能警告。
• 不需要替换成VirtualizedList，你的问题和数据源类型无关，只是属性访问错误和嵌套结构处理不当。

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