React Native FlatList仅渲染单个对象及图片不显示问题求助

一、FlatList仅渲染第一个对象的问题 #

问题根源 #

1. 处理API返回数据时，你用了数组解构([data])，这会只提取返回数组的第一个元素，导致data变成单个对象而非完整的啤酒列表数组。
2. 随后FlatList的data属性又把单个对象包成数组[data]，最终FlatList只拿到一个元素进行渲染。

修复代码 #

修改useEffect中的数据处理逻辑，去掉数组解构，直接保存完整的API返回数组：

useEffect(() => {
    fetch(API)
        .then((response) => response.json())
        .then((data) => { // 移除解构的[]
            setData(data);
        });
}, [refresh]);

同时调整FlatList的data属性，直接传入状态数组，建议额外添加keyExtractor避免React警告：

<FlatList
    style={styles.drinkList}
    data={data} // 移除外层的[]
    renderItem={renderDrinks}
    keyExtractor={(item) => item.id.toString()}
/>

二、图片无法显示的问题 #

问题根源 #

React Native的Image组件必须显式指定width和height样式，否则图片不会被渲染。

修复代码 #

先在样式表中添加图片的宽高样式：

const styles = StyleSheet.create({
    // ... 原有样式
    drinkImage: {
        width: 60,
        height: 180,
        marginTop: 10,
    },
});

然后给Drinks组件中的Image应用该样式：

<Image source={{uri: props.img}} style={styles.drinkImage}/>

额外优化 #

如果API返回的image_url可能为空，可添加默认图兜底避免报错：

<Image 
    source={{uri: props.img || 'https://替换为你的默认图片地址'}} 
    style={styles.drinkImage}
/>

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