如何在 React 中从对象数组中选择脚本

Question

我需要从界面 Order only items[] 值（名称、类别、数量、价格）中选择，将它们作为道具传递给 OrderItem。我正在为此苦苦挣扎，可能我需要遍历数组，但我不知道该怎么做。我无法通过互联网找到解决方案:(.

export interface Order {
  id: number
  user: number
  status: string
  date: string
  value: number
  number: number
  items: {
    id: number
    name: string
    category: string
    amount: number
    price: number
  }[]
}

import { Order } from '../OrderListItem/Order'

type OrderItemProps = Pick<Order['items'], 'name' | 'category' | 'amount' | 'price'>

const OrderItem = ({ name, category, amount, price }: OrderItemProps) => {
  return (
    <div className="flex justify-between">
      <p className="font-black">{name}</p>
      <p className="font-normal opacity-30">{category}</p>
      <p className="font-normal opacity-30">x{amount}</p>
      <p className="font-black text-blue-400">{price}€</p>
    </div>
  )
}

export default OrderItem

thx for your time :)

Answer 1

当您从 Order['items'] 中挑选时，您是从 Array 类型中挑选，而不是从项目模型中挑选。解决方案是将项目拆分到单独的界面：

export interface Item {
 id: number
 name: string
 category: string
 amount: number
 price: number
}

export interface Order {
  id: number
  user: number
  status: string
  date: string
  value: number
  number: number
  items: Item[]
}

type OrderItemProps = Pick<Item, 'name' | 'category' | 'amount' | 'price'>

如何在 React 中从对象数组中选择脚本

How to typescript Pick from array of object in React

typescript

reactjs

react-props