TypeError: Cannot read properties of undefined (reading '_id')
MeyCodr opened this issue · comments
I don't have any idea why is this happen even I already check all the code. for the first time i add to cart any items, it seems okay but, when select others items this error keep showing. if you don't mind, can you help me with this error?
The error "Property does not exist on type 'never'" occurs when we try to access a property on a value of type never or when TypeScript gets confused when analyzing our code. To solve the error, use square brackets to access the property. e.g.
const onAdd = (product, quantity) => {
const checkProductInCart = cartItems.find((item) => item['_id'] === product._id);
In short, do obj['myProperty'], instead of obj.myProperty.
The error "Property does not exist on type 'never'" occurs when we try to access a property on a value of type never or when TypeScript gets confused when analyzing our code. To solve the error, use square brackets to access the property. e.g.
const onAdd = (product, quantity) => { const checkProductInCart = cartItems.find((item) => item['_id'] === product._id);
In short, do obj['myProperty'], instead of obj.myProperty.
Didn't solve the problem
I tried something different, and it worked (for the moment)
I actually deleted the whole CheckProductInCart, and modified the cartItems so that it doesn't contain the quantity of the object, and went for looking for the index of the object in cartItems, and created a new array state [quantites, setQuantities] = useState([ ]);
each time a new object is added to the cartItems directly, and its quantity is added to the quantities. If the object already exists, I have only to update the quantity which has the same index in the quantities array.
here is my function
in the Cart.jsx you will need to add quantities to the destructured useStateContext( );
then in the product container when you map through cartItems you will need to add index to the parameters of map( )
and change in { item.quantity } to { quantities[index] }
as follow :
please don't mind the image["url"] and/or any thing weird, for I didn't use Sanity, I went for a database solution with MySQL using Prisma
Of Course you will have to change the toggleCartItemQuantity( ) and the onRemove( ) accordingly like this
And this solution strangely fixed the problem of changed order in the Cart
For now it works for me, but there might be some behavior I'm not aware of, counting on Adrian to bring a better & final solution
Just to inform, this problem still occurs for me even after implementing both the solutions suggested above. I have already made the necessary changes so that it can work with sanity but the error keeps popping up randomly.
Just to inform, this problem still occurs for me even after implementing both the solutions suggested above. I have already made the necessary changes so that it can work with sanity but the error keeps popping up randomly.
does it occur with the same error?
and did you try a hybrid of the 2 solutions as maybe Sanity's IDs aren't treated the same as prisma's
I think I have figured it out. The key apparently is the line of code that changes the quantity in cartItems. If you keep changing that value a few times, the error "Cannot read properties of undefined" will pop up. Hence the solution that you provided was good. I messed up because I added the code to change the quantity in cartItems on top of the code that you provided in order to integrate it with Sanity/stripe when what I should have done was change the body that is sent when fetching api/stripe.js. Namely, the quantities array needs to be included in the body. So I made the following changes to components/Cart.jsx and pages/api/stripe.js
Just to inform, this problem still occurs for me even after implementing both the solutions suggested above. I have already made the necessary changes so that it can work with sanity but the error keeps popping up randomly.
does it occurs with the same error?
Not working for me though. Literally copied the same code you both wrote
This is the error i got, tries but unable to find the error
Not working for me though. Literally copied the same code you both wrote
Can you send the full onAdd function?
You just need to return an item , in this particular part of onAdd function. as shown below :
if (checkProductInCart) {
const updatedCartItems = cartItems.map((item) => {
if (item._id === product._id)
return {
...item,
quantity: item.quantity + quantity,
};
{
return item;
}
});