Блог

Но запроса к серверу нет. Есть ли какие-либо ошибки в этом коде?

     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;
  

Как вы видите на следующем скриншоте, запроса к серверу нет.У кого-нибудь есть идеи по этому поводу?

Вы не вызываете fetchData() функцию. Вместо этого вы только объявили его внутри useEffect .

Поэтому вместо

         useEffect(() => {
            const fetchData = async () =>{
                dispatch(listProducts());
            };
            return () =>{
                //
            };
        }, []) 
  

вы можете просто написать

         useEffect(() => {
            dispatch(listProducts());
            return () =>{
                //
            };
        }, []) 
  

Это может быть не полное решение, так как, например, я не знаю, что listProducts() делает, но, безусловно, это часть решения.