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

Question

大家好，我得到了 API 数据，但无法解决如何解决这个问题，也许对新生有什么建议？

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

Answer 1

您列出的图像 API 不返回 URL。 它返回 JSON，就像您最初的 API 响应一样。 因此，您必须对图像执行fetch请求并存储它们，然后参考您在列表中获得的 URL。 这将需要更多的 state。

这是一个工作示例：

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>
   );
}

https://snack.expo.io/5FjQnP1Xf

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

它也不是一个特别强大的解决方案——在现实世界中，你肯定会比我在这里做更多的错误处理、缓存图像等——这只是一个基本的概念验证。