REACT NATIVE：如何获取 API 数据（JSON）并插入到 Flatlist，API

Question

Hello everyone i got API data from https://dog.ceo/api/breeds/list/all -list of all breeds, and inserted already into FlatList, now i want to insert their picture from: https://dog.ceo/api/breed/${breed}/images , but can't solve how to solve this problem the FlatList breed of dogs it should have its own picture(, maybe any tips for the freshman?

//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

The basic idea I use is to use a state variable for

 data={this.state.yourListData}

that will get a value (list) using a cmd like setState to be executed from within the promise you use to fetch the data. As I understand you want to show a list of components each having a picture. If this is the case I like to create a React component that includes an Image (or similar) component. Lets call this component MyCard. Then, at the renderItem I use something like:

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

References:

https://reactnative.dev/docs/flatlist

https://reactnative.dev/docs/images

Answer 2

Make component for 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} />
  }
/>