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

Question

大家好，我从https://dog.ceo/api/breeds/list/all 获得了所有品种的 API 数据，并且已经插入到 FlatList 中，现在我想从 https://dog.ceo/api/breed/${breed}/images 插入他们的图片，但无法解决如何解决这个问题@ 987654324@品种的狗应该有自己的图片（，也许对大一新生有什么建议？

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

平面列表

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