javascript - 构建和检索具有多种尺寸的 JSON 对象(图像)

Question

这就是我目前构建 JSON 数据的方式:

[
  {
    "slug": "image-1",
    "title": "Image 1",
    "img": "./images/folder1/Image-1.jpg",
    "sizes": [
      {
        "title": "Image 1",
        "size": "Large",
        "price": "$1799",
      },
      {
        "title": "Image 1",
        "size": "Medium",
        "price": "$1299",
      },
      {
        "title": "Image 1",
        "size": "Small",
        "price": "$799",
      }
    ]
  },
  {
    "slug": "image-2",
    ...
    ...
    ...
  }
]

我正在映射大小并在单击“添加”按钮时调用 addToCart(size)。
模板.js:

const details = data.Json
const { addToCart } = useContext(GlobalContext)

// <h1>{details.title}</h1>
// <img src={details.img} />
details.sizes.map((size, index) => {
  return (
    <h2>{size.size}</h2>
    <h2>{size.price}</h2>
    <button onClick={() => addToCart(size)}>
      Add
    </button>
  )
})

全局状态.js:

function addToCart(cartItem) {
  dispatch({
    type: "ADD_TO_CART",
    payload: cartItem,
  })
}

AppReducer.js:

export default (state, action) => {
  switch (action.type) {
    case "ADD_TO_CART":
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
      }

单击“添加”按钮后，购物车中将显示以下内容:
标题大小价格例如 图片 1 中号 $1299
CartItem.js:

export const CartItem = ({ cartItem }) => {
  return (
<Item>
  <p>{cartItem.title}</p>
  <p>{cartItem.size}</p>
  <p>{cartItem.price}</p>
</Item>
  )
}

现在这有效；但是，我想从每个大小中删除标题，以便我的 JSON 数据如下所示:

[
  {
    "slug": "image-1",
    "title": "Image 1",
    "img": "./images/folder1/Image-1.jpg",
    "sizes": [
      {
        "size": "Large",
        "price": "$1799",
      },
      {
        "size": "Medium",
        "price": "$1299",
      },
      {
        "size": "Small",
        "price": "$799",
      }
    ]
  },
  {
    "slug": "image-2",
    ...
    ...
    ...
  }
]

我怎样才能将 details.title 和 size 都传递给 addToCart()？

Answer 1

您可以代理组件范围内 details.title value 到一个新的对象，其中的大小属性分布在其中。

// <h1>{details.title}</h1>
// <img src={details.img} />
details.sizes.map((size, index) => {
  return (
    <h2>{size.size}</h2>
    <h2>{size.price}</h2>
    <button
      onClick={() => addToCart({
        title: details.title,
        ...size,
      })}
    >
      Add
    </button>
  )
})