Início / coding / Perguntas / 76988431
Accepted
Ahmed Khaled
Asked: 2023-08-28 02:25:32 +0800 CST

Atualizando objeto dentro de vários formulários de array aninhados com useState

  • 772

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

next.js

1 respostas

  1. Best Answer

    Para adicionar uma cor a um objeto de determinados tamanhos em seu produto, você precisa atualizar um elemento existente na matriz de tamanhos do seu produto.

    Isso handleAddSizefunciona porque você está adicionando um objeto de tamanho totalmente novo ao seu produto, o que significa que nenhuma atualização é necessária. Então você pode simplesmente espalhar e adicionar um novo objeto.

    A solução:

      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;
      },
    });
  };

    No futuro, recomendo usar TypeScript sempre que estiver escrevendo aplicativos React e NextJS. Ajuda a detectar e explicar esses tipos de erros antes que eles aconteçam.

    • 0

relate perguntas