React Native中如何正确渲染API返回的500+条商品数据

1. 调整State存储结构 #

抛弃单变量对应单个商品属性的写法，直接用数组类型的State存储全量商品数据：

// 以React为例，初始化空数组存储所有商品
const [productList, setProductList] = useState([]);

2. 改写接口请求处理逻辑 #

你当前接口返回的内容前缀带有无关字符串this is brand data，需要先处理再做JSON解析，同时统一预处理每个商品的字段，不需要单独为每个商品设置state：

fetch('http:api', {
  method: 'GET',
  headers: {'Content-Type': 'application/json'},
})
.then((res) => res.text()) // 先获取纯文本内容处理前缀
.then((rawText) => {
  // 移除前缀的无关字符串，提取纯JSON部分
  const jsonStr = rawText.replace('this is brand data', '').trim();
  const productData = JSON.parse(jsonStr);
  // 批量处理所有商品数据
  const processedList = productData.map(item => {
    // 统一处理图片路径，兼容无图场景
    const processedImg = item.images?.[0] ? item.images[0].substr(8, 17) : '';
    return {
      ...item,
      processedImg // 把处理好的图片路径挂载到商品对象上
    }
  });
  setProductList(processedList);
})
.catch(err => console.error('接口请求失败：', err))

3. 页面渲染逻辑 #

直接用数组map方法循环渲染所有商品，不需要写死固定数量的商品组件：

// 页面渲染部分代码
return (
  <div className="product-list">
    {productList.map(product => (
      // 用商品唯一_id作为key，优化渲染性能
      <div key={product._id} className="product-item">
        <img src={product.processedImg} alt={product.englishBrands} />
        <p>英文名称：{product.englishBrands}</p>
        <p>阿拉伯语名称：{product.arabicBrands}</p>
        <p>创建时间：{new Date(product.createdAt).toLocaleString()}</p>
        {/* 后续需要新增展示字段直接在此处添加即可 */}
      </div>
    ))}
  </div>
)

额外优化建议 #

• 如果要渲染500条以上的数据，建议加分页加载或者虚拟滚动逻辑，避免一次性渲染太多DOM节点导致页面卡顿
• 可以按需添加商品列表的搜索、筛选功能，提升使用体验

内容的提问来源于stack exchange，提问作者user14877357