如何从API response在react原生呈现500+产品

Question

我有一个API。当我调用那个API的时候。我得到了3个不同的产品的对象。所以到目前为止，我通过将每个产品图像名称设置为如下状态，在我的屏幕上呈现该产品

  fetch('http:api', {
        method: 'GET',
        headers: {'Content-Type': 'application/json'},
      })
        .then((returnValue) => returnValue.json())
        .then((response) => {
          setImageForBrand1(response.data[2].images[0].substr(8, 17));
          setEngNameForBrand1(response.data[2].englishBrands);
          setArbNameForBrand1(response.data[2].arabicBrands);
 setImageForBrand2(response.data[2].images[0].substr(8, 17));
          setEngNameForBrand2(response.data[2].englishBrands);
          setArbNameForBrand2(response.data[2].arabicBrands);
 setImageForBrand3(response.data[2].images[0].substr(8, 17));
          setEngNameForBrand3(response.data[2].englishBrands);
          setArbNameForBrand3(response.data[2].arabicBrands);
        })

但是，如果我必须获取500+产品，并且必须呈现名称、价格等所有内容，那该怎么办呢？那么，什么才是正确的方法呢？请帮帮忙

这是我的回答

 this is brand data[{"images":[],"isDeleted":false,"_id":"60f04d8f83076b5768e819b0","englishBrands":"HP","arabicBrands":"حصان","parent":"undefined","status":"1","createdAt":"2021-07-15T15:00:31.953Z","updatedAt":"2021-07-15T15:00:31.953Z","__v":0},{"images":[],"isDeleted":false,"_id":"60f0585183076b5768e819cf","englishBrands":"Acer","arabicBrands":"حصان","parent":"undefined","status":"1","createdAt":"2021-07-15T15:46:25.618Z","updatedAt":"2021-07-15T15:46:25.618Z","__v":0},{"images":["uploads\\1626469622418.jpg"],"isDeleted":false,"_id":"60f1f4f61a5bbf1bcccf2e59","englishBrands":"name English","arabicBrands":"name
Arabic","parent":"undefined","status":"1","createdAt":"2021-07-16T21:07:02.536Z","updatedAt":"2021-07-20T19:50:21.273Z","__v":0}]

Answer 1

api().then
  {res => {
    setDate(res.data);
  }}
  //make a one variable data then set you response
  <Flatlist
    data={data}
    renderItem={({item, index}) => (
      //you get you object in item and index
      <View>
        <Image source={{uri: '//you image link'}} />
        <Text>{item.englishBrands}</Text>
      </View>
    )}
  />

为了更好地理解，请参阅本文档React native flatlist