如何从 API 响应中渲染 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

如何从 API 响应中渲染 500 多种产品

how to render 500+ products in react native from API response

javascript

api

e-commerce

react-native