但是没有对服务器的请求。这段代码有什么错误吗?
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;
如下面的屏幕快照所示,服务器没有任何请求。是否有人对此事有任何想法?
答案 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 () =>{
//
};
}, [])
会做什么,但是肯定它是解决方案的一部分。