ReactNativeFlatList僅渲染1個物件-有解無憂

我知道答案可能很簡單，但我目前正在學習，我不明白為什么我的平面串列只抓取陣列中的第一個物件。幫助將非常appriciated。

import { FlatList, Text, SafeAreaView, View, StyleSheet, Image, Button, } from 'react-native';
import { useEffect, useState } from 'react';

const API =
    'https://api.punkapi.com/v2/beers';

const renderDrinks = ({ item }) => (
    <Drinks
        id={item.id}
        name={item.name}
        desc={item.description}
        img={item.image_url}
        abv={item.abv}
    />
);

const Drinks = (props) => (
    <View style={styles.item}>
        <Text style={styles.itemText}>Id: {props.id}</Text>
        <Text style={styles.itemText}>Name: {props.name}</Text>
        <Text style={styles.itemText}>ABV: {props.abv}%</Text>
        <Text style={styles.itemText}>Description: {props.desc}</Text>
        <Image source={{uri: props.img}}/>
    </View>
);

export default function App() {
    const [data, setData] = useState([]);
    const [refresh, onRefresh] = useState(false)
    useEffect(() => {
        fetch(API)
            .then((response) => response.json())
            .then(([data]) => {
                setData(data);
            });
    }, [refresh]);

    return (
        <SafeAreaView style={styles.container}>
            <Button style={styles.button} onPress={() => onRefresh(!refresh)} title="Refresh" />
            <FlatList
                style={styles.drinkList}
                data={[data]}
                renderItem={renderDrinks}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    drinkList: { alignContent: 'stretch', width: '100%' },
    container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: 40,
        backgroundColor: '#222222',
        padding: 8,
    },
    item: {
        borderWidth: 1,
        borderColor: 'white',
        padding: 13,
        margin: 7,
        borderRadius: 7,
        backgroundColor: 'green',
    },
    itemText: { color: 'white' },
});

此外，如果有人知道如何讓影像出現，那就太棒了。謝謝！

uj5u.com熱心網友回復：

如果嘗試從物件中解構屬性，則應使用 { data } 而不是 [data]

在這里，您應該例如在 useEffect 中執行此操作
useEffect(() => { fetch(API) .then((response) => response.json()) .then((response) => { setData(response); }); }, [refresh]);

并將 Flatlist 更改為 <FlatList style={styles.drinkList} data={data} renderItem={renderDrinks} />

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/521700.html

標籤：反应式拿来反应本机平面列表平面列表

上一篇：嵌套的foreach重構

下一篇：RN-作為道具的打字稿樣式