[React] - usuwanie elementu ze stanu

Question

Witam,

 

W jaki sposób usunąć wybrany element ze stanu. Stan jest tablicą, więc stosuje array(filter). Nie wiem jednak w jaki sposób przekierować index z elementu. 

delete = (e) => {
  this.setState(prevState => {
    return {
      cart: [...this.state.cart.filter((element, index, array)=>{
        return (index !== e);
      })]
    }
  })
}



{this.state.cart.map( (el, index) => {
  return <li key={index} onClick={this.delete}>{el.title} - {el.identificator}</li>;
})}

 

Answer 1

delete = (e) => {
  const elementToRemove = parseInt(e.target.value,10)
  const newState = this.state.cart.filter(el=> parseInt(el.identificator,10) !== elementToRemove)
this.setState({cart: newState})
}

  {this.state.cart.map((el, index) =>{
                  return <li key={index} value={el.identificator} onClick={this.delete}>{el.title} - {el.identificator}</li>;
                })}

 

Comments

Parę drobnych uwag:

1. tworzysz zmienną newState, co sugeruje, że podmienia ona cały state, a tak się nie dzieje, podmienia tylko wlaściwość cart w state, więc trzeba by tę nazwę zmienić, może np. newCartWithoutRemovedElement.
2. druga kwestia, bardziej do analizy calego state, co tkwi w identificator i dlaczego to nie jest typ number skoro jako taki potem jest używany? Jeśli jest to string to Kolega zrobił dobrze, robiąc parseInt na każdym elemencie podczas filtrowania, ale tak być nie powinno. Nawet jeśli z jakiś powodów wartość ta trafia początkowo jako string to powinna być przekonwertowana do number w momencie zapisu do state, aby potem nie tracić zasobów na przerabianie w pętli.
3. unikalbym wsadzania do key  w LI wartosci index, jest to pewnie nie zrozumienie idei właściwości key i tak na prawdę, jeśli miałby tam zawsze być we wszystkich listach tylko index to nie będzie to unikalna wartość więc można w ogóle to pominąć (tylko trzeba by pewnie wtedy odpowiednio ustawić eslinta jeśli to sprawdza, choć tak na prawdę to dla key={index} eslint powinien strzelić warningiem albo errorem).

---

Nie bardzo rozumiem czy te uwagi są do mnie czy do kolegi :)  

Pytanie było jak usuwać elementy, a nie czy dobrze korzysta z key czy state. Na nie odpowiedziałem. Nazwa newState rzeczywiście powinna być inna.

Tak podchodząc do problemu, to trzeba się zastanowić czy nazwa delete jest dobra. Bo mogłaby być np. removeElementFromChart. Oraz czy nie lepiej skrócić map do formy :

{this.state.cart.map((el, index) =><li key={`cartElement${index}`} value={el.identificator} onClick={this.removeElementFromChart}>{el.title} - {el.identificator}</li>)}

A co jak cart będzie pusty(nie bedzie istnial) ? Więc może : 

{this.state.cart && this.state.cart.map((el, index) =><li key={`cartElement${index}`} value={el.identificator} onClick={this.removeElementFromChart}>{el.title} - {el.identificator}</li>)}