I'm try to send a request to the server - node.js

Question

But there is no request to the server. Is there any mistakes in this code?
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom'
import axios from 'axios';
import { useSelector, useDispatch } from 'react-redux';
import { listProducts } from '../actions/productActions';
function HomeScreen(props) {
const productList = useSelector(state => state.productList);
const { products, loading, error } = productList;
const dispatch = useDispatch();
useEffect(() => {
const fetchData = async () =>{
dispatch(listProducts());
}
return () =>{
//
};
}, [])
return loading ? <div>Loading...</div> :
error ? <div>{error}</div> :
<ul className="products">
{
products.map(product =>
<li key={product._id}>
<div className="product">
<Link to={'/product/' + product._id}>
<img className="product-image" src={product.image} alt="product"/>
</Link>
<div className="product-name">
<Link to= {'/product/' + product._id}> {product.name} </Link>
</div>
<div className="product-brand">{product.brand}</div>
<div className="product-price">Rs.{product.price}</div>
<div className="product-rating">{product.rating} Stars ({product.numReivews}Reviews)</div>
</div>
</li>)
}
</ul>
}
export default HomeScreen;
As you see in following screenshot, there is no request to the server.Does anyone have idea about this matter?

Answer 1

You're not calling the fetchData() function. Instead you've only declared it inside useEffect.
So instead of
useEffect(() => {
const fetchData = async () =>{
dispatch(listProducts());
};
return () =>{
//
};
}, [])
you can just write
useEffect(() => {
dispatch(listProducts());
return () =>{
//
};
}, [])
This might not be the full solution as, for example, I don't know what listProducts() does but certainly it is a part of the solution.