REACT NATIVE:如何获取API数据(JSON)并插入到Flatlist, API

Question

大家好，我从https://dog.ceo/api/breeds/list/all -所有品种的列表中获得API数据，并插入到FlatList中，现在我想从:https://dog.ceo/api/breed/${breed}/images插入他们的图片，但无法解决如何解决这个问题，FlatList品种的狗应该有自己的图片(，也许对新生有任何提示?

//Here i am geting data to list all breeds: 
useEffect(() => {
fetch('https://dog.ceo/api/breeds/list/all')
.then((response) => response.json())
.then((json) => setData(Object.keys(json.message)))
.catch((error) => console.error(error))
.finally(() => setLoading(false));
}, []);
<FlatList
data={data}
keyExtractor={({ id }, index) => index.toString()}
renderItem={({ item }) => (

<Text>{item} </Text>

<Image
style={styles.tinyLogo}
source={{
uri:  //here i have wanted to put url of JSON, but i should first fetch it , but i dont know how to fetch the image that each breed should have its own PICTURE,
)
}}
/>  

Answer 1

为ListItem制作组件:

ListItem.js

import React, {useCallback, useEffect} from 'react';
import PropTypes from 'prop-types';
import {Text, View, ActivityIndicator} from 'react-native';
const ListItem = ({breed}) => {
const [image, setImage] = useState('');

const getImage = useCallback(async () => {
const resp = await fetch(`https://dog.ceo/api/breed/${breed}/images/random`);
const data = await resp.json();
setImage(data.message);
}, [breed]);
useEffect(() => {
getImage();
}, [getImage]);

return (
<View>
<Text>{breed}</Text>
{ image ? (
<Image source={{uri: image}} />
) : (
<ActivityIndicatior />
) }
</View>
);
};
ListItem.propTypes = {
breed: PropTypes.string;
};
export default ListItem;

FlatList

import ListItem from './ListItem';
<FlatList
data={data}
keyExtractor={({ id }, index) => index.toString()}
renderItem={
({item}) => <ListItem breed={item} />
}
/>  

Answer 2

我使用的基本思路是为

使用一个状态变量

data={this.state.yourListData}

将使用像setState这样的cmd从您用来获取数据的承诺中执行一个值(列表)。据我所知，您想显示一个组件列表，每个组件都有一个图片。如果是这种情况，我喜欢创建一个包含Image(或类似)组件的React组件。我们称这个组件为MyCard。然后，在renderItem中，我使用如下内容:

renderItem={({ item }) => ( < MyCard item={item} /> ) }

引用:

https://reactnative.dev/docs/flatlist
https://reactnative.dev/docs/images