主页 / coding / 问题 / 76988431
Accepted
Ahmed Khaled
Asked: 2023-08-28 02:25:32 +0800 CST

使用 useState 更新多个嵌套数组形式内的对象

  • 772

我用 nextjs 构建电子商务网站，

我有包含产品数据的产品表格

这是虚拟数据：

 {
    id: "1",
    name: "قميص لاكسوت",
    description: "فول كفر خامه قطن ليكرا",
    rating: 4,
    total_sell: 35,
    images: [
      {
        url: "/public/56774684-c63b-4835-b419-a330a61eeccc.jpeg",
      },
      {
        url: "/public/56774684-c63b-4835-b419-a330a61eeccc.jpeg",
      },
      {
        url: "/public/56774684-c63b-4835-b419-a330a61eeccc.jpeg",
      },
    ],
    category: {
      name: "قمصان",
      gender: "حريمي",
    },

    sizes: [
      {
        id: "1",
        size: "l",
        colors: [
          { id: "1", color: "red", stock: 10 },
          { id: "2", color: "black", stock: 5 },
        ],
      },
      {
        id: "2",
        size: "xl",
        colors: [
          { id: "1", color: "blue", stock: 15 },
          { id: "2", color: "white", stock: 50 },
        ],
      },
    ],

    createdAt: new Date("2023-08-12T03:49:42.714+00:00"),
  },

我尝试添加尺寸字段，并在内部尝试添加颜色字段

我无法到达这个颜色数组

这是我添加尺寸字段的代码

  const handleAddSize = () => {
    const productCopy = JSON.parse(JSON.stringify(product));
    productCopy.sizes = [
      ...productCopy.sizes,
      { size: "", colors: [{ color: "", stock: 0 }] },
    ];
    setProduct(productCopy);
  };

当我尝试以同样的方式达到色域时，它不起作用

  const handleAddColors = () => {
    setProduct({
      ...product,
      sizes: [
        ...product.sizes,
        {colors: [...product.sizes.colors, { color: "", stock: 0 }] }
      ],
    });
  };

在此输入图像描述

我尝试了几种方法但没有成功

next.js

1 个回答

  1. Best Answer

    要将颜色添加到产品上的特定尺寸对象，您需要更新产品上尺寸数组中的现有元素。

    之所以handleAddSize有效，是因为您正在向产品添加全新的尺寸对象，这意味着无需更新。所以你可以传播并添加一个新对象。

    解决方案：

      const handleAddColors = (targetSizeId) => {
    setProduct({
      ...product,
      sizes: product.sizes.map((size) => { //Replace size object with new object containing a new color if it is the one we are looking for. Else, return existing size.
        if(targetSizeId === size.id) {
          return {
            ...size,
            colors: [
              ...size.colors,
              { color: "", stock: 0 }
            ]
          }
        }
        return size;
      },
    });
  };

    展望未来，我建议每当您编写 React 和 NextJS 应用程序时都使用 TypeScript。帮助在此类错误发生之前发现并解释它们。

    • 0

相关问题