Блог

У меня есть некоторые элементы внутри массива, которые находятся в одном и том же состоянии. Мне нужно обновить только тот, на который я нажал, чтобы добавить еще один товар в свою корзину покупок. Как я могу сделать это, не меняя других?

Мое начальное состояние выглядит так:

 class ShoppingCart extends Component {  constructor() {  super();  this.state = {  isEmpty: true,  cartItems: [],  count: 0,  };  this.getStoredProducts = this.getStoredProducts.bind(this);  this.handleButtonIncrease = this.handleButtonIncrease.bind(this);  }   componentDidMount() {  this.getStoredProducts();  }   handleButtonIncrease() {  this.setState((prevState) =gt; ({  count: prevState.count   1,  }));  }   getStoredProducts() {  const getFromStorage = JSON.parse(localStorage.getItem('cartItem'));  if (getFromStorage !== null) {  this.setState({  cartItems: getFromStorage,  }, () =gt; {  const { cartItems } = this.state;  if (cartItems.length) {  this.setState({ isEmpty: false });  }  });  }  }   render() {  const { isEmpty, cartItems, count } = this.state;  const emptyMsg = (  lt;p data-testid="shopping-cart-empty-message"gt;Seu carrinho está vaziolt;/pgt;  );  return (  lt;divgt;  { isEmpty ? (emptyMsg) : (cartItems.map((item) =gt; (  lt;ShoppingCartProduct  key={ item.id }  id={ item.id }  count={ count }  cartItems={ item }  handleButtonIncrease={ this.handleButtonIncrease }  /gt;  )))}  lt;/divgt;  );  } }   

Похоже, это должно быть ShoppingCartProduct его обязанностью. Если вы удалите это count и setCount логику из своего ShoppingCart компонента и создадите их внутри ShoppingCartProducts компонента, каждый из элементов будет иметь свое собственное count состояние, которое можно обновлять независимо.

Еще один способ увидеть это-напрямую изменить каждый cartItem из них , но поскольку вы не указали их формат, невозможно узнать, хранят ли они какую-либо информацию о количестве, поэтому я бы выбрал первый подход.

handleButtonIncrease может принять item.id в качестве параметра, чтобы он мог обновить state.cartItems .

 handleButtonIncrease(itemId) {   const cartItems = this.state.cartItems.map(item =gt; {  return item.id === itemId   ? {   // apply changes here for the item with itemId  }  : item  });   this.setState((prevState) =gt; ({  cartItems,  count: prevState.count   1,  }));  }  

После этого также обновите свой обратный вызов:

 handleButtonIncrease={ () =gt; this.handleButtonIncrease(item.id) }