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

大家好，我从中获得了API数据，但无法解决如何解决此问题，也许可以给新生一些提示

在这里，我附上了我已经做过的事情的截图：

---

您列出的图像API不返回URL。它返回JSON，就像初始API响应一样。因此，您必须对图像执行

获取

请求并存储它们，然后参考列表中的URL。这需要更多的状态

下面是一个工作示例：

export default function App() {
  const [data, setData] = React.useState(null)
  const [isLoading, setLoading] = React.useState(false)
  const [images, setImages] = React.useState({})
  
  React.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));
    }, []);

  React.useEffect(() => {
    if (!data) { return; }
    data.forEach((dataItem,index) => {
      if (index > 5) { return; }
      let url = `https://dog.ceo/api/breed/${dataItem}/images`
      fetch(url)
        .then((response) => response.json())
        .then(json => {
          if (!json.message[0]) { return; }
          setImages(prevState => ({...prevState, [dataItem]: json.message[0]            }));
        })
    })
  },[data])

    
    return (
      <View style={styles.container}>
      {isLoading ? <ActivityIndicator/> : (
          <FlatList
            data={data}
            keyExtractor={({ id }, index) => index.toString()}
            renderItem={({ item }) => (
            <View>
              <Text>{item} </Text>
              {images[item] ?  <Image
               style={{width: 100, height: 100}}
                source={{
               uri: images[item],
               }}
              />  : null }
              <Text>Image: {images[item]}</Text>
            </View>)}
          />
      )
      }
      </View>
   );
}

导出默认函数App（）{
const[data，setData]=React.useState（null）
常量[isLoading，setLoading]=React.useState（false）
const[images，setImages]=React.useState（{}）
React.useffect（（）=>{
取（'https://dog.ceo/api/breeds/list/all')
.then（（response）=>response.json（））
.then（（json）=>setData（Object.keys（json.message）））
.catch（（错误）=>console.error（错误））
.最后（（）=>setLoading（false））；
}, []);
React.useffect（（）=>{
如果（！data）{return；}
data.forEach（（数据项，索引）=>{
如果（索引>5）{return；}
让url=`https://dog.ceo/api/breed/${dataItem}/images`
获取（url）
.then（（response）=>response.json（））
。然后（json=>{
如果（！json.message[0]）{return；}
setImages（prevState=>（{…prevState[dataItem]：json.message[0]}））；
})
})
}，[数据]）
返回(
{孤岛加载

请注意，在这个示例中，我只获取前5个图像，以避免进行大量API调用

它也不是一个特别健壮的解决方案——在现实世界中，你肯定会想做比我在这里做的更多的错误处理，缓存图像等等——这只是一个基本的概念证明。
String literal require
${var\u name}
我甚至喜欢这个，但不起作用（是的，我试图在这里进行所有API调用，但它给了我一个错误，即它正在降低应用程序的速度，并确保使用纯组件