• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dodawanie produktu do koszyka (state)

VPS Starter Arubacloud
0 głosów
588 wizyt
pytanie zadane 24 sierpnia 2018 w JavaScript przez Bakr Mądrala (6,850 p.)
edycja 24 sierpnia 2018 przez Bakr

Witam,

 

Piszę prostą aplikację w ramach nauki React. Chciałbym, aby po kliknięciu w nazwę książki była ona dodawana do koszyka. 

a) W jaki sposób dodać do stanu inne atrybuty, np. identificator. O ile atrybut title mogę dodać bez problemu, o tyle pozostałych, takich jak identificator, czy author już nie.

newProduct = {
        title: e.target.title
          }      

b) Produkt faktycznie dodaje się do koszyka, ale staje się on tablicą, która dzieli tytuł na litery. Próbowałem zmienić zapis 

      let chart =[...this.state.chart];

na 

      let chart ={...this.state.chart};

ale wówczas po klikniętu pokazuje się pusta strona. 

 

Pełen kod: https://codepen.io/Bakr1/pen/bxdgBg

komentarz 24 sierpnia 2018 przez StOcK Mądrala (6,100 p.)

Sam wymuszasz dodanie tytułu jako tablicy:
Zamiast 

let newProducts = [...this.state.product.title];  

po prostu 

let newProducts = this.state.product.title;

 

1 odpowiedź

0 głosów
odpowiedź 24 sierpnia 2018 przez k.wichura Pasjonat (19,870 p.)

Co do dodawania id, to zamiast tablicy stringow zrob tablice obiektow.

ps. w react nie ma czegos takiego jak class. Zamieniamy to na className.

Dodanie nowego produktu do koszyka:

 

this.state = {
chart: [],
}
this.setState({
chart = [....this.state.chart, NOWYPRODUKT]
})

 

komentarz 24 sierpnia 2018 przez Bakr Mądrala (6,850 p.)

To właśnie powoduje, że koszyk ma w sobie tablice z podzielonymi tytułami na litery:

komentarz 24 sierpnia 2018 przez k.wichura Pasjonat (19,870 p.)
edycja 24 sierpnia 2018 przez k.wichura

Bo sam sie gubisz w tym co napisałeś. Zrób sobie consol.logi na tej funckji add i zobacz co tam wyprawiasz i co pobierasz. 

const newProducts = [...this.state.product.title].join('');  

to zalatwi sprawe, ale sam kod nie jest ok.

    add = (e) => {
      e.preventDefault();
      const { title } = e.target 
      const newProduct = {
        title
      }   
      
      this.setState({
        product: newProduct,
        chart: [...this.state.chart, title]

      })
    }

O to chodzi ?

komentarz 26 sierpnia 2018 przez Bakr Mądrala (6,850 p.)
Mogę też dodać obiekt do tablicy, tak, aby w chart poza tytułem były też inne właściwości?

Po zmianie na chart: [...this.state.chart, newProduct] po kliknięciu pojawia się pusta strona.

Podobne pytania

0 głosów
1 odpowiedź 112 wizyt
pytanie zadane 31 sierpnia 2020 w JavaScript przez Bish0p Obywatel (1,940 p.)
0 głosów
0 odpowiedzi 153 wizyt
pytanie zadane 4 maja 2018 w JavaScript przez niezalogowany
+1 głos
2 odpowiedzi 329 wizyt
pytanie zadane 24 sierpnia 2016 w C i C++ przez easytodo Mądrala (5,380 p.)

92,775 zapytań

141,703 odpowiedzi

320,560 komentarzy

62,109 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...