I'm trying to build a website and I'm building it with React-Redux. I have (API) which is a (Data Array of Object) and its length is (16 elements). And fetch the data through Axios and save it in the (reducer ) and fetch the data to the required component through (UseSelect), and the data comes to me correctly as I want. Then I try, through (UseEffect), to extract the image link from the data and put it in a new (state), but when I do a map on it, it does not extract the data correctly.
What is my error and what is the solution?
API DATA
[
{
"id":1,
"name":"Esprit Ruffle Shirt",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","White"],
"img":"images/product-01.jpg",
"category":"women"
},
{
"id":2,
"name":"Herschel supply",
"supplier":"Herschel supply",
"price":"35.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-02.jpg",
"category":"women"
},
{
"id":3,
"name":"Only Check Trouser",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","White"],
"img":"images/product-03.jpg",
"category":"men"
},
{
"id":4,
"name":"Classic Trench Coat",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-04.jpg",
"category":"women"
},
{
"id":5,
"name":"Front Pocket Jumper",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-05.jpg",
"category":"women"},
{
"id":6,
"name":"Herschel supply",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-06.jpg",
"category":"accessories"
},
{
"id":7,
"name":"Femme T-Shirt In Stripe",
"supplier":"Esprit Ruffle Shirt",
"price":"76.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-07.jpg",
"category":"women"
},
{
"id":8,
"name":"T-Shirt with Sleeve",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-08.jpg",
"category":"women"
},
{
"id":9,
"name":"Pretty Little Thing",
"supplier":"Esprit Ruffle Shirt",
"price":"96.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-09.jpg",
"category":"accessories"
},
{
"id":10,
"name":"Square Neck Back",
"supplier":"Herschel supply",
"price":"35.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-10.jpg",
"category":"women"
},
{
"id":11,
"name":"Lightweight Jacket",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-11.jpg",
"category":"men"
},
{
"id":12,
"name":"Lightweight Jacket",
"supplier":"Esprit Ruffle Shirt",
"price":"16.61 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-12.jpg",
"category":"accessories"
},
{
"id":13,
"name":"Lightweight Jacket",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-13.jpg",
"category":"women"},
{
"id":14,
"name":"Lightweight Jacket",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-14.jpg",
"category":"women"
},
{
"id":15,
"name":"Lightweight Jacket",
"supplier":"Esprit Ruffle Shirt",
"price":"76.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-15.jpg",
"category":"accessories"
},
{
"id":16,
"name":"Lightweight Jacket",
"supplier":"Esprit Ruffle Shirt",
"price":"16.64 $",
"Size":["Size s","Sizes M","Size L","Size XL"],
"color":["Red","Blue","Grey","White"],
"img":"images/product-16.jpg",
"category":"women"
}
]
my code in component
export function ShopDetails() {
const prodectData=useSelector((state)=>state.productData)
const [option,setOption]=useState("")
console.log(prodectData)///See the result in the picture below // ((Line 25))
const [image,setImge] = useState([{
}]);
useEffect(()=>{
prodectData.map((el)=>(
setImge([...image,{original:el.img,thumbnail:el.img}])
)
)
console.log(image) /// See the result in the picture below ((line 38))
},[prodectData])
return (
//Some Codes
)
}
CodePudding user response:
setImge is for updating image state. If you wanna use the image List as a state. You should do as below.
// example
const productData = useSelector(state => state.productData);
const imageList = productData.map((data => {original: data.img, thumnbnail: original.img})); // you make a img List you want!
const [image, setImage] = useState(imageList);
..... render logic
That's it! You don't need to use useEffect cuz whenever the productData in redux store changes, React re-render all components that use the productData. It means new productData you just fetched will be put image state in useState.