I have applied several methods to get a different object from my server. I am using React and Node JS
This is my HomeScreen. This is ok. I get everything I need.
import React,{useState,useReducer,useEffect} from 'react';
import {Link } from 'react-router-dom';
import axios from 'axios';
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,products: action.payload,loading:false};
case 'FETCH_FAIL':
return {...state,loading:false,error: action.payload};
default:
return state;
}
};
function HomeScreen(){
const [{loading, error, products},dispatch] = useReducer(logger(reducer),{
products: [],
loading: true,
error: '',
});
useEffect(()=>{
const fetchData = async()=>{
dispatch({type: 'FETCH_REQUEST'});
try{
const result = await axios.get('/api/products');
dispatch({type: 'FETCH_SUCCESS',payload:result.data})
}catch(err){
dispatch({type: 'FETCH_FAIL', payload: err.message});
}
const result = await axios.get('/api/products');
};
fetchData();
},[]);
return (
<body>
<nav>
<div className="menu-background">
{/*<p className="menu" >Amazonas</p>*/}
<Link to="/" className="menu" >amazonas</Link>
</div>
<div className="logo-background">
<p className="logo">Menu</p>
</div>
</nav>
<ul className="products">
{
products.map(product=>
<li>
<div className="product">
<Link to={`/product/${product._id}`}>
<img className="image" src={product.image} alt={product.name} ></img>
</Link>
<Link to={`/product/${product._id}`}>{product.name}</Link>
<div className="rating">{product.rating}</div>
<div className="price">{product.price}</div>
</div>
</li>
)
}
</ul>
</body>
)
}
export default HomeScreen;
Then, I have my ProductScree. This is failing. I always get the first object from my collection of objects. Every object in my collection has a different id.
import {Link} from 'react-router-dom';
import axios from 'axios';
import React,{useState,useEffect,useReducer} 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 [{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>
{product.name}
</div>
)
}
export default ProductScreen;
This is my 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/:_id',(req,res)=>{
const product = data.products.find((x)=>x.id===req.params.id);
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}`);
})
And this is my 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'
},
{
_id:2,
name: 'Jean-Levi',
rating: 4.2,
image: '/images/Jean.jpg',
price: '$30'
},
{
_id:3,
name: 'Jacket-Quicksilver',
rating: 4.5,
image: '/images/Jacket.jpg',
price: '$35'
},
{
_id:4,
name: 'T-Shirt-Adidas',
rating: 4.8,
image: '/images/T-Shirt-2.jpg',
price: '$20'
},
{
_id:5,
name: 'Jean-Wrangler',
rating: 4.2,
image: '/images/Jean-2.jpg',
price: '$30'
},
{
_id:6,
name: 'Jacket-Champion',
rating: 4.5,
image: '/images/Jacket-2.jpg',
price: '$35'
}
]
}
