The point is that when I access an entire object of type ProductCardInterface ->
export interface ProductCardInterface {
image_url: string;
product_name: string;
price: number;
}
I get the correct output in the console, but when I try to access the fields of this object, for example here ->
const { image_url, price } = product_data;
...
console.log('product_data:', product_data, 'price:', price, 'image_url:', image_url);
I get undefined ->
product_data: {"image_url":"...","product_name":"table","price":39.99} price: undefined image_url: undefined
Although data is sent and received correctly from the backend, the logs on the backend ->
[2024-01-08T15:51:33Z INFO back::services::furniture::furniture_get_product_data] ..., table, 39.99
[2024-01-08T15:51:33Z INFO actix_web::middleware::logger] 127.0.0.1 "GET /furniture/table_get_data HTTP/1.1" 200 698 "http://localhost:5173/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" 0.000857
Component code:
import React, { useEffect, useState } from "react";
import { ProductCardInterface } from "../../interfaces/ProductCardInterface.ts";
import { getProductDataByName } from "../../services/GetProductByName.ts";
import { MyLoader } from "../../utils/Loader/MyLoader.tsx";
import { AddToCart } from "../../services/AddToCart.ts";
export const ProductCard: React.FC<{ name: string }> = ({ name }) => {
const [product_data, set_product_data] = useState<ProductCardInterface | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
(async () => {
try {
set_product_data(await getProductDataByName(name));
} catch (error: unknown) {
if (error instanceof Error) {
console.error(`Error fetching furniture data for ${name}: ${error}`);
setError(error);
}
} finally {
setLoading(false);
}
})();
}, [name]);
if (loading) { return <MyLoader />; }
if (error || !product_data) {
console.log('Error or no product data:', error, product_data);
return (
<div className="error_div">
<p className="error_definition" id="error_def">
Internal Server Error: {error ? error.message : "YAR ERROR"}
</p>
</div>
);
}
const { image_url, price } = product_data;
console.log('product_data:', product_data, 'price:', price, 'image_url:', image_url);
return (
<div className="product-card">
<h3 className="product-name">{name}</h3>
{image_url && <img className="product-image" src={image_url} alt={name} />}
{price !== undefined && <p className="product-price">Price: ${price}</p>}
<button
className="add-to-cart-button"
id={`add-${name}-to-cart-button`}
onClick={() => AddToCart(product_data!)}
>
Add to Cart
</button>
</div>
);
}
getProductDataByName function:
export const getProductDataByName = async (product_name: string): Promise<ProductCardInterface> => {
return fetch(`${URL}/furniture/${product_name}_get_data`)
.then(response => {
console.log(product_name);
if (!response.ok) throw new Error(`Failed to fetch data for furnitureId ${product_name}. Status: ${response.status}`);
return response.json();
})
.catch(error => {
console.error(`Error in getFurnByName: ${error.message}`);
throw error;
});
};