我正在尝试向服务器发送请求

时间:2020-09-01 10:18:05

标签: node.js reactjs

但是没有对服务器的请求。这段代码有什么错误吗?

    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;

如下面的屏幕快照所示,服务器没有任何请求。是否有人对此事有任何想法?

enter image description here

1 个答案:

答案 0 :(得分:2)

您没有调用 ID Phenotype AA 1 AB 1 AC 0 AD 1 AE 0 AG 0 函数。相反,您只在fetchData()内部声明了它。

所以不是

useEffect

你可以写

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

这可能不是完整的解决方案,例如,我不知道 useEffect(() => { dispatch(listProducts()); return () =>{ // }; }, []) 会做什么,但是肯定它是解决方案的一部分。