无法使用平面列表获取 json 上的数据

Question

我正在使用带有平面列表的 Free Meal API。我有类别组件、类别页面、useFetch 挂钩。我在屏幕上看不到 Flatlist。我可以获取数据的控制台日志，但无法使用 flatlist 访问数据。

.env 文件夹：

API_URL_CATEGORIES="https://www.themealdb.com/api/json/v1/1/categories.php"

API_URL_FILTER="https://www.themealdb.com/api/json/v1/1/filter.php?"

使用 Fetch 钩子获取 URL 中的数据并返回加载图标，如果 URL 不起作用则返回错误，并返回 URL 中数据的数据。

function useFetch(url) {

    const [data, setData] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState();

    const fetchData = async () => {
        try {
        const {data: responseData} = await axios.get(url);
        setData(responseData);
        setLoading(false); }
        catch (error) {
            setError(error.message);
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData();
    }, []);

    return {error, loading, data};
};

export default useFetch;

类别组件：

const Category= ({category, onSelect}) => {
    return(
        <TouchableOpacity style={styles.container} onPress={onSelect}>
            <Image
             style={styles.image}
             source={{uri:category.strCategoryThumb}} />
            <Text style={styles.title}>{category.strCategory}</Text>
        </TouchableOpacity>
    )
}

export default Category;

类别页面：

const Categories = ({navigation}) => {

    const { error, loading, data } = useFetch(config.API_URL_CATEGORIES);

    console.log(data)

    const handleCategorySelect = strCategory => {
        navigation.navigate("Detail", {strCategory})
    }

    const renderCategory = ({item}) => <Category category={item} onSelect={() => handleCategorySelect(item.strCategory)}/>;

    if(loading) {
        return <Loading/>;
    }

    if(error) {
        return <Error/>;
    }

    return(
        <View style={styles.container}>
            <FlatList data={data} renderItem={renderCategory}/>
            <Text>Categorises</Text>
        </View>
    )
}   

export default Categories;

Answer 1

我认为数据实际上是包含属性 categories 的对象，其中包含一个数组。

试试 data.categories，我相信这应该没问题。

无法使用平面列表获取 json 上的数据

Cannot get datas on json with flatlist

reactjs

react-native

react-hooks

react-native-flatlist

react-component