Obecnie próbuję dowiedzieć się, jak obsługiwać zmienne produkty z funkcją rozprzestrzeniania, na przykład, jeśli mam sklep internetowy, który sprzedaje ubrania (podobne do zrzutu ekranu podjęte poniżej)

enter image description here

Chciałbym więc przechwycić, gdy użytkownik dodaje różne rozmiary dla tego samego produktu.

Initial_State = {} //empty 

Kiedy użytkownik przesłany Dodaj do koszyka z wielkością s, a następnie stałby się

{
    0:{
       "S" : 1
    }
}

Gdzie 0 jest identyfikatorem produktu, a "S" jest wielkością produktu, a następnie liczbę dodawania do koszyka, gdy użytkownik prześle inną prośbę o dodanie do koszyka (rozmiar m)

{
    0:{
       "S" : 1,
       "M" : 1
    }
}

To moja próba do tej pory:

const quantityById = (state = initialState, action) => {
  
  const { productId, varient } = action

  switch (action.type) {
    case ADD_TO_CART:
    case INCREMENT_CART_ITEM_QUANTITY:
      return { ...state,
        [productId]: {
           [varient] : (state[productId][varient] || 0) + 1 // not working as expected
        }
      }
    default:
      return state
  }
}

Czy istnieje sposób na osiągnięcie tego, co zamierzam zrobić z funkcją rozprzestrzeniania? Po prostu nie mogę tego wymyślać w tej chwili. Zapraszamy do opuszczenia komentarza, ponieważ jestem otwarty na dyskusję.

Dzięki!

Edytuj:

Jest to jeden z danych testowych, których używałem do tego eksperymentu

{
        "id": 0, 
        "title": "White Shirt",
        "category": "men",
        "price": 120.00,
        "varient": ["S", "M"],
        "description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse blandit aliquet arcu.",
        "inventory": 100
    },

Zarówno identyfikator, jak i różnorodny jest prawidłowo odbierany, Wpisz opis obrazu tutaj

Problemem jest teraz, że jeśli uruchomię kod powyżej, otrzymam następujący błąd Wpisz opis obrazu tutaj

Edytuj 2 Dodałem zmianę sugerowaną przez Kalhana

const quantityById = (state = initialState.quantityById, action) => {
  
  const { productId, varient } = action

  switch (action.type) {
    case ADD_TO_CART:
    case INCREMENT_CART_ITEM_QUANTITY:
      console.log(state)
      return { ...state,
        [productId]: {
          [varient]: (state?.[productId]?.[varient] ?? 0) + 1
        }
      }
    default:
      return state
  }
}

Kod teraz zastąpi rozmiar i aktualizację liczby, gdy dodam nowy rozmiar zamiast dodać jako nowy para klucza / wartości.

enter image description here

Edytuj 3

Dodano sugerowaną zmianę, ale wydaje się, że istnieje pewny błąd składni Nieoczekiwany token

0
user2232355 21 listopad 2020, 17:10

1 odpowiedź

Najlepsza odpowiedź

Wygląda na to, że po raz pierwszy zadzwonisz do tej akcji, twój stan jest tylko pustym obiektem {}

Próbując wykonać ten kod, JS spróbuje zdobyć state[productId], co spowoduje undefined, a następnie tring, aby uzyskać [Varient] z undefined i podniósł ten problem

(state[productId][varient] || 0) + 1

To, co musisz zrobić, to sprawdzić productId jest już w stanie,

// Check productId is already in the state, if yes, then get the varient inside it
// If any of these (productId or varient) are not exists then return 0
// basically if there is no value of state[productId][varient], then return 0, without throwing an error
(state?.[productId]?.[varient] ?? 0) + 1

Sprawdź, jak Nulish Operator działa

Sprawdź, jak Opcjonalne łańcuchowanie działa


  return { ...state,
    [productId]: {
       ...(state?.[productId] ?? {}),
       // This is because you have to keep old state unchanged, and only change only one record there.
       // Basically if there is already state.[productId], then copy it, and in the blow line override only varient of it
       [varient] : (state?.[productId]?.[varient] ?? 0) + 1
    }
  }
1
Kalhan.Toress 21 listopad 2020, 16:41