Почему мой код добавляет элемент в массив при следующем щелчке по React-javascript

Какое-то время я учусь и тренируюсь реагировать. Но возникла странная проблема. Я делаю небольшое приложение для электронной коммерции (шаг за шагом с учебником).

const addToCart = (id) => {
      
       let tempProduct = storeProduct;
       const index = tempProduct.indexOf(getItem(id));
       const product = tempProduct[index];
       product.inCart=true;
       product.count = 1;
       product.total = product.price;
       setCart([...cart,product]);
       setStoreProduct(tempProduct);
       console.log(cart)
   
  };

storeProduct — это массив объектов, которые являются продуктами в моем приложении.

Вызывается этой функцией при нажатии на кнопку. Он берет элемент по идентификатору и вносит некоторые изменения в данные. Затем следует добавить этот элемент в корзину, который представляет собой массив. Но при первом нажатии корзина пуста. При втором щелчке элемент попадает в корзину и т. Д. В чем проблема?

Я предполагаю, что боты setCart и setStoreProduct происходят из React.useState (). Так что проверьте связанный вопрос SO   —  person Talha    schedule 26.04.2021

Ссылка @Borjante вам поможет. Кстати, вы можете зарегистрировать новые данные корзины с помощью React.useEffect (() = ›console.log (cart), [cart]).   —  person Talha    schedule 26.04.2021

setStoreProduct, возможно, ничего не делает, потому что вы устанавливаете то же значение.   —  person Talha    schedule 26.04.2021

@Kornflexx показывает фактическую корзину от useEffect. Но почему?   —  person Talha    schedule 26.04.2021