React Native跨页传递嵌套数组 FlatList渲染报错排查

报错来自两处逻辑写错：

• memberData.companyPortfolioImage是数组类型，potId、potImage是数组内每个子对象的属性，直接在数组上访问这两个属性只会拿到undefined
• 详情页FlatList的回调逻辑错误：renderItem和keyExtractor的入参是companyPortfolioImage数组遍历出的单个子项，错误复用外层memberData的变量名会导致访问路径完全错位。

直接替换MemberDetailsScreen.js的代码为以下版本即可：

const MemberDetailsScreen = ({route, navigation}) => {
    const { memberData } = route.params;

    // 接收FlatList传入的当前遍历项
    const Portfolio = ({item}) => {
        return (
            <View style={{width: '100%', alignItems: 'center'}}>
                <View style={[GlobalStyle.CompanyPortfolioContainer]}>
                    {/* 从当前遍历的作品集子项取图片地址 */}
                    <Image style={[GlobalStyle.CompanyPortfolioImage]} source={{uri: item.potImage}} resizeMode="cover" />
                </View>
            </View>
        );
    }

    return (
        <ScrollView  style={[GlobalStyle.GrayScrollView]}>      
            <View style={{alignItems: 'center'}}>
                <View style={[GlobalStyle.MemberInfoContainer]}> 
                    <Text style={[GlobalStyle.MemberDetailName]}>{memberData.memberName}</Text>
                </View>
             
                <View style={[GlobalStyle.MemberInfoContainer, {marginBottom: 10}]}>
                    <FlatList
                        scrollEnabled={false}
                        data={memberData.companyPortfolioImage}
                        renderItem={Portfolio} 
                        // 从当前遍历的作品集子项取唯一key
                        keyExtractor={portfolioItem => portfolioItem.potId}
                    />
                </View>
            </View>
        </ScrollView>
    );
}

MemberListItem.js中FlatList的keyExtractor回调参数名和外层数据源MemberData完全重名，容易引发语义混淆，建议修改为语义化命名，不影响功能但可提升代码可读性：

// 原写法
keyExtractor={MemberData => MemberData.memberId}
// 优化后
keyExtractor={memberItem => memberItem.memberId}

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