React Typescript如何遍历API返回对象内的products数组解决渲染报错

错误根因 #

你遇到的报错是因为直接将数组/对象作为React子元素渲染，React不支持直接输出对象类型的值。结合你的代码和数据结构，还有两个逻辑问题：

1. 接口返回的每一条收藏数据IFavourite中的products是数组类型，不是单个产品对象
2. FavouriteItem组件内直接输出{products}，相当于直接渲染数组+内部对象，触发报错

修复方案 #

第一步：先确认类型定义正确 #

先保证你的接口定义符合返回数据结构：

// interfaces/Interfaces.ts
export interface IProduct {
  id: string;
  productName: string;
  manufacture: string;
  description: string;
  price: string;
  image: string;
}

export interface IFavourite {
  id: string;
  products: IProduct[];
}

方案1（更推荐：组件职责拆分更清晰） #

把单个产品作为FavouriteItem的入参，在列表层遍历所有产品：

修改FavouriteItem组件

import React, { FC } from "react"
import { IProduct } from "../../interfaces/Interfaces"

const FavouriteItem: FC<IProduct> = ({ productName, manufacture, price, image, description }) => {
  return (
    <div className="favourite-card">
      <img src={image} alt={productName} />
      <h3>{productName}</h3>
      <p>品牌：{manufacture}</p>
      <p>售价：¥{price}</p>
      <p>详情：{description}</p>
    </div>
  )
}

export default FavouriteItem

修改FavouriteList组件

import React, { FC, useContext } from "react"
import { FavouriteContext } from "../../context/context"
import { IFavourite, IProduct } from "../../interfaces/Interfaces"
import { FavouriteType } from "../../types/Types"
import FavouriteItem from "./FavouriteItem"

const FavouriteList: FC = () => {
  const { favourite } = useContext(FavouriteContext) as FavouriteType

  return (
    <div className="favourite-list">
      {/* 遍历收藏列表 */}
      {favourite.map((favItem: IFavourite) => (
        <div key={favItem.id} className="favourite-group">
          {/* 遍历单个收藏下的所有产品 */}
          {favItem.products.map((product: IProduct) => (
            <FavouriteItem 
              key={product.id}
              {...product}
            />
          ))}
        </div>
      ))}
    </div>
  )
}

export default FavouriteList

方案2（无需修改FavouriteList传参逻辑） #

如果不想调整List层的传参，直接在FavouriteItem内部遍历products数组即可：

import React, { FC } from "react"
import { IFavourite, IProduct } from "../../interfaces/Interfaces"

const FavouriteItem: FC<IFavourite> = ({ products }) => {
  return (
    <div>
      {products.map((product: IProduct) => (
        <div key={product.id}>
          <h3>{product.productName}</h3>
          <p>品牌：{product.manufacture}</p>
          <p>售价：¥{product.price}</p>
        </div>
      ))}
    </div>
  )
}

export default FavouriteItem

注意事项 #

尽量不要用map遍历的index作为元素的key，优先使用数据自带的唯一id字段，避免出现渲染异常。

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