构建和检索具有多种尺寸的 JSON object（图像）

Question

这就是我目前的 JSON 数据结构：

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

我正在映射尺寸并在单击 'Add' 按钮时调用 addToCart(size)。

Template.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>
  )
})

GlobalState.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],
      }

单击 'Add' 按钮后，购物车中将显示以下内容：

标题尺寸价格例如图片 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": "99",
      },
      {
        "size": "Medium",
        "price": "99",
      },
      {
        "size": "Small",
        "price": "9",
      }
    ]
  },
  {
    "slug": "image-2",
    ...
    ...
    ...
  }
]

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

Answer 1

您可以将组件范围内的 details.title 值代理到一个新的对象中，其中包含大小属性。

// <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>
  )
})

构建和检索具有多种尺寸的 JSON object（图像）

Structuring and retrieving JSON object (an image) with multiple sizes

javascript

json

reactjs

graphql

gatsby