Javascript 使用redux中的操作获取useEffect中的数据

我试图在useEffect中获取数据，但每次我尝试将数据作为道具发送到另一个组件（产品）时，都会得到一个空数组

ProducList.js

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { fetchProducts } from "../actions/products";
import { Product } from "./Product";

const ProductList = ({ getProducts, products, loading }) => {
  useEffect(() => {
    getProducts();
  }, []);

  return (
    <div className="p-4">
      <Product products={data} />
    </div>
  );
};

const mapStateToProps = state => ({
  products: state.products,
  loading: state.loading
});

const mapDispatchToProps = {
  getProducts: fetchProducts
};

export default connect(mapStateToProps, mapDispatchToProps)(ProductList);

import React，{useffect，useState}来自“React”；
从“react redux”导入{connect}；
从“./actions/products”导入{fetchProducts}；
从“/Product”导入{Product}；
const ProductList=（{getProducts，products，loading}）=>{
useffect（（）=>{
getProducts（）；
}, []);
返回(
);
};
常量mapStateToProps=状态=>({
产品：国家产品，
加载：state.loading
});
const mapDispatchToProps={
getProducts:fetchProducts
};
导出默认连接（mapStateToProps、mapDispatchToProps）（ProductList）；

这里是我的Product.js

import React from "react";

export const Product = props => {
  const products = props.products.map(product => {
    return (
      <div className="col-lg-4 mb-4" key={product.Id}>
        <div className="card shadow-sm">
          <img
            className="card-img-top"
            src={`/images/${product.Id}.jpg`}
            alt={product.name}
          />
          <div className="card-body">
            <h5 className="card-title">
              {product.name}{" "}
              <span className="badge badge-warning">${product.price}</span>
            </h5>
            <a href="#" className="btn btn-secondary mx-auto">
              Add to cart
            </a>
          </div>
        </div>
      </div>
    );
  });

  return <div className="row">{products}</div>;
};

从“React”导入React；
导出常量产品=道具=>{
const products=props.products.map（product=>{
返回(
{product.name}{”“}
${product.price}
);
});
返回{产品}；
};

---

我需要获取数据并发送到产品组件

看起来您的数据从未传递到ProductList组件（ProductList中没有对数据属性的引用）

我相信您正在尝试将产品数据传递到产品组件中。这是你能做的

const [newProducts, setNewPropducts] = useState([]);

//add this useEffect and keep your other one
useEffect(() => {
  //set state for products here
  setProducts(products)
}, [products]);


<Product products={newProducts} />

const[newProducts，setNewPropducts]=useState（[]）；
//添加此useEffect并保留另一个
useffect（（）=>{
//在此处设置产品的状态
setProducts（产品）
}，[产品]；

看起来您的数据从未传递到ProductList组件（ProductList中没有对数据属性的引用）

我相信您正在尝试将产品数据传递到产品组件中。这是你能做的

const [newProducts, setNewPropducts] = useState([]);

//add this useEffect and keep your other one
useEffect(() => {
  //set state for products here
  setProducts(products)
}, [products]);


<Product products={newProducts} />

const[newProducts，setNewPropducts]=useState（[]）；
//添加此useEffect并保留另一个
useffect（（）=>{
//在此处设置产品的状态
setProducts（产品）
}，[产品]；

确保getProducts（）函数在父组件中返回某些内容。确保getProducts（）函数在父组件中返回某些内容。