Mam prostą aplikację do koszyka na zakupy wykonaną za pomocą REACT i REDUX.

Mam kilka przedmiotów, które są wyświetlane na ekranie z polami wejściowymi, w których liczba przedmiotów jest zmieniona i na podstawie tej nowej ceny obliczyłem. Ale jedno jest problematyczne.

Cena jest obliczana poprawnie, gdy aktualizuję liczbę przedmiotów lub gdy dodaję nowy, ale gdy aktualizuję liczbę, ten element jest renderowany jako ostatni. Więc jeśli zaktualizuję numer pierwszej pozycji, skończy się ona jako ostatnia pozycja na liście

1
2
3
4

Powiedzmy, że aktualizuję element 1 wtedy lista będzie wyglądać tak

2
3
4
1

I to jest naprawdę frustrujące. W ten sposób wyświetlam przedmioty

{this.props.cart.map(item => {
  return (
    <div key={item.product.id}>
      <Item item={item}/>
    </div>
  )
})}

Próbowałem też z ...reverse().map, ale robi to samo, z tym że umieszcza go na górze strony zamiast na dole. Chcę, żeby pozostały tam, gdzie są, kiedy zostaną zaktualizowane

Jest to nadrzędny składnik pojedynczego elementu. Oba są komponentami klasy, mam to również w komponencie nadrzędnym

const mapStateToProps = (state) => {
  return {
    cart: state.cart.cart
  }
};

export default connect(mapStateToProps)(Cart);

Dziękuję za Twój czas. Jeśli potrzebujesz innych informacji, skontaktuj się z nami, a ja je udzielę.

AKTUALIZACJA 1

W ten sposób aktualizuję koszyk

handleChange = e => {
    if(e.target.value <= 0) {
      alert("Quantity must be grater than 0");
      return;
    }

    if(e.target.value > this.props.item.product.amount) {
      alert("Max number of products reached");
      return;
    }

    if(this.state.quantity !== e.target.value) {
      this.setState({
        quantity: e.target.value,
        // btnVisible: true
      }, () => this.props.updateCartQuantity(this.props.item.product.id, this.state.quantity))
    }
  };
<input type="number" className="form-control" onChange={(e) => {this.handleChange(e)}} value={this.state.quantity}/>

Ta aktualizacja dotyczy składnika podrzędnego

UPDATE 2

updateCartQuantity to funkcja

export const updateCartQuantity = (productId, quantity) => {
  return {
    type: 'UPDATE_CART_QUANTITY',
    payload: {
      productId,
      quantity: quantity
    }
  }
};

Tutaj przetwarzane są dane

case 'UPDATE_CART_QUANTITY':
      let item = cart.find(item => item.product.id === action.payload.productId);
      let newCart = cart.filter(item => item.product.id !== action.payload.productId);

      item.quantity = action.payload.quantity;

      newCart.push(item);

      return {
        ...state,
        cart: newCart
      };

Problem prawdopodobnie tkwi w tym case, ale po prostu go nie widzę

-1
Mileta Dulovic 21 listopad 2019, 01:07
Podaj minimalny przykład działania - użyj np. Fragmenty StackBlitz lub SO
 – 
kind user
21 listopad 2019, 01:08
Ponieważ piszę to z mojego telefonu, teraz jest to prawie niemożliwe. Wystarczająco trudno było napisać ten post. Mam nadzieję, że ktoś może dostarczyć jakichkolwiek informacji na ten temat bez działającego przykładu rn.
 – 
Mileta Dulovic
21 listopad 2019, 01:12
Czy możesz pokazać, jak aktualizujesz koszyk?
 – 
Jayce444
21 listopad 2019, 01:15
Zaktualizowałem pytanie
 – 
Mileta Dulovic
21 listopad 2019, 01:18
Co to jest updateCartQuantity?
 – 
Ry-
21 listopad 2019, 01:19

1 odpowiedź

Najlepsza odpowiedź

W porządku. Naprawiono to dzięki komentarzowi @HMR do wpisu. Właśnie zdałem sobie sprawę, co robię.

Zamiast cart.filter Powinienem tego użyć

let newCart = cart.map(c => c.id === action.payload.productId ? {...c, quantity: action.payload.quantity} : c);

I usuń

newCart.push(item);

.map zajmie się zapętleniem elementów, więc nie ma potrzeby wypychania elementu do newCart.push(item)

Dziękuję za Twój komentarz. Mam nadzieję, że to komuś pomoże :)

0
Mileta Dulovic 21 listopad 2019, 01:57