React中如何用TypeScript Pick从Order接口items数组提取字段作为组件props

1. 修复OrderItemProps类型定义错误 #

你当前的类型定义不生效的原因是Order['items']是数组类型，无法直接Pick数组上不存在的name等属性，需要先取数组的元素类型：

// 旧的错误写法
// type OrderItemProps = Pick<Order['items'], 'name' | 'category' | 'amount' | 'price'>
// 新的正确写法
type OrderItemProps = Pick<Order['items'][number], 'name' | 'category' | 'amount' | 'price'>

Order['items'][number]代表取items数组中任意一项的类型，再对其做Pick即可得到正确的props类型。

2. 父组件遍历items传递props的实现 #

拿到Order类型的数据后，直接用map遍历items数组即可，每一项的属性和OrderItem要求的props完全匹配，直接透传即可：

// 父组件示例代码
import OrderItem from './OrderItem'
import type { Order } from '../OrderListItem/Order'

interface OrderListProps {
  order: Order
}

const OrderList = ({ order }: OrderListProps) => {
  return (
    <div className="order-item-wrapper">
      {/* 遍历items数组传递props */}
      {order.items.map(item => (
        <OrderItem 
          key={item.id}
          name={item.name}
          category={item.category}
          amount={item.amount}
          price={item.price}
        />
      ))}
    </div>
  )
}

export default OrderList

如果要简化写法也可以直接解构透传，刚好提取你需要的四个字段、过滤多余的id字段，效果完全一致：

{order.items.map(({id, ...restProps}) => (
  <OrderItem key={id} {...restProps} />
))}

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