Реагировать на удаление товаров из корзины по индексу с помощью хука useCallback

Question

Я пытаюсь добавить функцию, которая удаляет элемент из компонента корзины покупок, щелкнув onClick, который запускает функцию removeProductFromCartAtIndex useCallback. До сих пор мне удалось успешно добавить товары в корзину, но когда я использую onClick для удаления, он удаляет весь массив корзины покупок.

Я хотел бы удалить товары из корзины в индексе, используя хук useCallback

Я чувствую, что неправильно обновляю состояние. Я знаю, что было бы проще, если бы я отфильтровал фактический идентификатор элемента вместо индекса, я пытаюсь понять, как я могу фильтровать массив с помощью индекса.

Заранее спасибо за любую помощь или совет!

файл context.js:

      const [shoppingCart, setShoppingCart] = React.useState([]);

const removeProductFromCartAtIndex = React.useCallback((index) => {
  setShoppingCart(shoppingCart.filter((item, i) => i !== index
}, []);

файл shopping-cart.js:

      const ShoppingCart = () => {
  const {shoppingCart, actions} = useContext(AppContext)

  return (
    <div className="shopping-cart">Shopping Cart
      <ul>
        {shoppingCart.map((item, index) => (
        <li key={index}>
          <span className='count'>1</span> 
          <span>{item.name}</span>
          <span>$0.00</span>
        <button onClick={() => {actions.removeProductFromCartAtIndex(index)}}><VscTrash /></button></li>
      ))}
      </ul>

Answer 1

Есть две вещи, которые вам нужно исправить:

1. Добавлять setShoppingCartкак зависимость от useCallback.
2. Используйте обновление функционального состояния.

Итак, ваш код должен выглядеть так:

      const removeProductFromCartAtIndex = React.useCallback((index) => {
  setShoppingCart(currentShoppingCart => currentShoppingCart.filter((item, i) => i !== index
}, [setShoppingCart]);

В общем, когда вы обновляете переменную состояния, а новое значение состояния зависит от предыдущего значения, вы хотите использовать обновление функционального состояния. В противном случае вы рискуете использовать устаревшее значение.