Ahmed Khaled's questions

Eu construo um site de comércio eletrônico com nextjs,

Tenho formulário de produto com dados do produto

estes são dados fictícios:

 {
    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"),
  },

tento adicionar campo de tamanho e dentro tento adicionar campo de cor

não consigo acessar essa matriz de cores

este é meu código para adicionar campo de tamanho

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

quando tento alcançar o campo de cores da mesma forma, não funciona

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

insira a descrição da imagem aqui

Eu tentei de várias maneiras, mas não funcionou