在 useEffect 钩子中获取数据后，reactJS 不呈现数据

Question

我有一个使用 axios 的 API，它将获取产品列表。我在 useEffect() 钩子中调用了它，并以 [] 作为第二个参数。我将运行之前的数据检查到功能组件的 return 命令中，并且数据在那里，但是我的 ProductCard 组件没有呈现。你能帮我解决这个问题吗？

FeaturedProducts.js

const FeaturedProducts = (props) => {
    const [productList, setProductList] = useState([]);
    // const productList = useSelector(productListSelector);

    useEffect(async () => {
        let rs = await fetchFeaturedProducts();
        setProductList(rs);
    }, []);

    console.log(productList);

    return (
        <div className="container-fluid pt-5">
            <div className="text-center mb-4">
                <h2 className="section-title px-5"><span className="px-2">Featured</span></h2>
            </div>
            <div className="row px-xl-5 pb-3">
                {
                    productList.map(product => {
                        <ProductCard id={product.id} name={product.name} price={product.price} img="abc"/> // need img={product.img}
                    })
                }
            </div>
        </div>
    );
}

export default FeaturedProducts;

fetchFeaturedProducts()

const fetchFeaturedProducts = async () => {
    try {
        let response = await AxiosClient.post("/product/search", {
            searchType: "desc",
            searchBy: "average_rating"
        });
        let data = response.data.data;

        return data;
    }
    catch (error) {
        raiseErrorMessages(error.response.data.errors);

        return [];
    }
}

ProductCard.js

const ProductCard = (props) => {
    const detailUrl = "/product?id=" + toString(props.id);

    return (
        <div className="col-lg-3 col-md-6 col-sm-12 pb-1">
            <div className="card product-item border-0 mb-4">
                <div className="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
                    <img className="img-fluid w-100" src={props.img} alt="" />
                </div>
                <div className="card-body border-left border-right text-center p-0 pt-4 pb-3">
                    <h6 className="text-truncate mb-3">{props.name}</h6>
                    <div className="d-flex justify-content-center">
                        <h6>{props.price}</h6>
                        {/* <h6 className="text-muted ml-2"><del>{props.price}</del></h6> */}
                    </div>
                </div>
                <div className="card-footer d-flex justify-content-between bg-light border">
                    <a href={detailUrl} className="btn btn-sm text-dark p-0"><i className="fas fa-eye text-primary mr-1" />View Detail</a>
                    <a href='#' className="btn btn-sm text-dark p-0"><i className="fas fa-shopping-cart text-primary mr-1" />Add To Cart</a>
                </div>
            </div>
        </div>
    )
}

export default ProductCard;

感谢您的宝贵时间。

Answer 1

发生这种情况是因为您在映射数据时错过了 return

// .....
{
productList.map(product => {
 return (<ProductCard id={product.id} name={product.name} 
          price={product.price} img="abc"/>) // need img= 
          {product.img}
         })
}

或者您可以使用 ()

{
productList.map(product => (
 <ProductCard id={product.id} name={product.name} 
          price={product.price} img="abc"/>) // need img= 
          {product.img})        
}

在 useEffect 钩子中获取数据后，reactJS 不呈现数据

reactJS doesn't render the data after being fetched in useEffect hook

reactjs

async-await

react-hooks

axios

use-effect