React Native FlatList不渲染图片且报'Cannot read large of undefined'错误

核心错误原因 #

Cannot read 'large' of undefined 错误本质是 FlatList 渲染时item.picture不存在，同时代码存在多个影响数据更新和组件渲染的逻辑问题：

具体问题与修复步骤 #

1. 未用React状态管理购物车数据 #

你用普通数组const cartItems = []存储数据，即便push新数据，组件也不会触发重渲染，FlatList始终拿不到更新后的内容。初始空数组阶段，若异步加载过程中状态不一致，就会导致读取item.picture.large失败。

修复： 改用useState管理数据：

import { useState } from 'react';

function PaymentScreen({route, navigation}) {
    const [cartItems, setCartItems] = useState([]); // 替换普通数组为状态
    // ...

2. 异步数据更新方式错误 #

直接push普通数组无法触发状态更新，必须通过setCartItems生成新数组：

// 原错误写法
cartItems.push(res);

// 修复后
setCartItems(prev => [...prev, res]);

3. 变量作用域问题：it在useEffect中未定义 #

你在useEffect之后才声明const {it} = route.params;，导致useEffect回调里的it是undefined，调用_getData(it.id.value)会报错，进而导致获取的res异常（比如返回undefined），最终FlatList渲染时item为undefined，读取picture.large失败。

修复： 把const {it} = route.params;移到组件顶部，确保useEffect能访问到：

function PaymentScreen({route, navigation}) {
    const [cartItems, setCartItems] = useState([]);
    const {it} = route.params; // 移到顶部
    // ...

4. 异步操作的并发处理与状态重置 #

页面聚焦时需先清空旧数据，避免重复添加；同时处理多个_getData的异步请求，确保数据加载完整：

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', async () => {
        setCartItems([]); // 先清空旧数据
        try {
            const k = await _forEachKey(); // 用await替代.then，代码更清晰
            // 注意：原代码里用固定的it.id.value，若k中的v是商品ID，应改为_getData(v)，需根据业务逻辑调整
            const itemPromises = k.map(v => _getData(it.id.value));
            const fetchedItems = await Promise.all(itemPromises);
            setCartItems(fetchedItems); // 一次性更新所有数据
        } catch (err) {
            console.error('加载购物车数据失败:', err);
        }
    });
    return unsubscribe;
}, [navigation, it]); // 依赖项添加it

5. FlatList边界处理 #

为避免item为undefined时报错，在renderItem中添加判断：

renderItem={({item}) => {
    if (!item?.picture?.large) {
        return <View style={{height: imageHeight/2, width: imageWidth, backgroundColor: '#eee'}} />; // 占位图
    }
    return <Image style={{height: imageHeight/2, width: imageWidth}} source={{ uri: item.picture.large }}/>
}}

完整修复后代码示例 #

import { useState, useEffect } from 'react';
import { View, FlatList, Image } from 'react-native';

function PaymentScreen({route, navigation}) {
    const [cartItems, setCartItems] = useState([]);
    const {it} = route.params;
    const { confirmPayment, loading } = useConfirmPayment();

    useEffect(() => {
        const unsubscribe = navigation.addListener('focus', async () => {
            setCartItems([]);
            try {
                const k = await _forEachKey();
                // 若k中的v是商品ID，替换为_getData(v)
                const itemPromises = k.map(v => _getData(it.id.value));
                const fetchedItems = await Promise.all(itemPromises);
                setCartItems(fetchedItems);
            } catch (err) {
                console.error('加载购物车数据失败:', err);
            }
        });
        return unsubscribe;
    }, [navigation, it]);

    return (
        <View>
            <FlatList
                data={cartItems}
                keyExtractor={(item) => item.id.value} // 添加keyExtractor避免警告
                renderItem={({item}) => {
                    if (!item?.picture?.large) {
                        return <View style={{height: imageHeight/2, width: imageWidth, backgroundColor: '#eee'}} />;
                    }
                    return <Image 
                        style={{height: imageHeight/2, width: imageWidth}} 
                        source={{ uri: item.picture.large }}
                    />;
                }}
            />
        </View>
    );
}

export default PaymentScreen;

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