The data comes from my server.
The code when I work on it, but after I refresh it, it say map does not read the values.
import {Link} from 'react-router-dom';
import axios from 'axios';
import React,{useState,useEffect,useReducer,Component} from 'react';
import {useParams} from 'react-router-dom';
import logger from 'use-reducer-logger';
const reducer = (state,action) => {
switch(action.type){
case 'FETCH_REQUEST':
return {...state,loading: true};
case 'FETCH_SUCCESS':
return {...state,product: action.payload,loading:false};
case 'FETCH_FAIL':
return {...state,loading:false,error: action.payload};
default:
return state;
}
};
function ProductScreen(props){
const params = useParams();
const {_id} = params;
/*const [sizes,setSizes] = useState(-1);
const handlerLoadingArticles = function(e){
const option = e.target.value;
} */
const [{loading, error, product},dispatch] = useReducer(logger(reducer),{
product: [],
loading: true,
error: '',
});
useEffect(()=>{
const fetchData = async()=>{
dispatch({type: 'FETCH_REQUEST'});
try{
const result = await axios.get(`/api/products/${_id}`);
dispatch({type: 'FETCH_SUCCESS',payload:result.data})
}catch(err){
dispatch({type: 'FETCH_FAIL', payload: err.message});
}
};
fetchData();
},[_id]);
return(
<div>
<div>
<Link to="/">Back to results</Link>
<div className="product-report">
<Link to={`/products/${product.name}`}>
<img className="image" src={product.image} alt={product.name} ></img>
</Link>
<div className="product-description">
<div className="name-product">{product.name}</div>
<div className="rating-product">{product.rating}</div>
<div className="product-price-variation">
<div className="product-price">Price:</div>
<div className="variation-price">{product.price}</div>
</div>
<div className="product-size-variation">
<div className="product-size">Size:</div>
<div className="size-variation">
<select className="size-select" >
{
product.size.map((item,i)=>(
<option value={i}>{item}</option>
))
}
</select>
</div>
</div>
<div className="product-color-variation">
<div className="color-product">Color:</div>
<div className="color-variation">
</div>
</div>
</div>
<div className="cart-box">
<h1 className="price-cart-box">$9.0</h1>
<h1 className="stock-cart-box">In Stock</h1>
<div className="cart-box-buttons">
<select className="select-button">
<option value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<button className="cart-button">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
)
}
export default ProductScreen;
server
import express from 'express';
import data from './data.js';
const app = express();
app.get('/api/products',(req,res)=>{
res.send(data.products);
});
app.get('/api/products/:name',(req,res)=>{
const product = data.products.find((x)=>x.name==req.params.name);
if(product){
res.send(product);
}else{
res.status(404).send({message: 'Product Is Not Found'});
}
});
const port = process.env.PORT || 5000;
app.listen(port, () => {
console.log(`serve at http://localhost:${port}`);
})
data
export default {
/*image: '/images/T-Shirt.jpg',*/
products: [
{
_id:1,
name: 'T-Shirt-Hurley',
rating: 4.8,
image: '/images/T-Shirt.jpg',
price: '$20',
size: ["Small","Medium","Large"],
color: ["Red","Blue","Black","White"]
},
{
_id:2,
name: 'Jean-Levi',
rating: 4.2,
image: '/images/Jean.jpg',
price: '$30',
size: ["Small","Large"],
color: ["Blue","Black","White"]
},
{
_id:3,
name: 'Jacket-Quicksilver',
rating: 4.5,
image: '/images/Jacket.jpg',
price: '$35',
size: ["Medium","Large"],
color: ["Blue","Black","White"]
},
{
_id:4,
name: 'T-Shirt-Adidas',
rating: 4.8,
image: '/images/T-Shirt-2.jpg',
price: '$20',
size: ["Small","Medium"],
color: ["Red","Black","White"]
},
{
_id:5,
name: 'Jean-Wrangler',
rating: 4.2,
image: '/images/Jean-2.jpg',
price: '$30',
size: ["Medium"],
color: ["Blue","White"]
},
{
_id:6,
name: 'Jacket-Champion',
rating: 4.5,
image: '/images/Jacket-2.jpg',
price: '$35',
size: ["Medium","Large"],
color: ["Black","White"]
}
]
}
Result before refreshing:
Result after refreshing:
