我在从 useSelector 中获取数据时得到了未定义的数据

Question

我正在制作一个电子商务网站，我在前端使用 react 和 redux，在服务器端使用 express。当我尝试从 useSelector hook 访问 redux 存储的数据时，我得到了未定义，但是当我在 action 中 console.log() 它时，我得到了数据。请帮助我这两天一直在努力解决这个问题。

我收到此错误：类型错误：无法读取未定义的属性（读取 'map'）

这是我的主屏幕代码

const dispatch = useDispatch();
const productList = useSelector((state) => state.productList);
const { products } = productList;
console.log("Product List : ", products);

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

return (
 <div>
   {products.map((data, id) => {
     return (
       <div className="product_div" key={id}>
         <Products data={data} />
       </div>
     );
   })}
 </div>

);

这是针对 productAction 的：

import {
 PRODUCT_LIST_FAILURE,
 PRODUCT_LIST_REQUEST,
 PRODUCT_LIST_SUCCESS,
} from "../Constants/productConstants";

export const listProducts = () => async (dispatch) => {
 dispatch({ type: PRODUCT_LIST_REQUEST });
 try {
  const res = await fetch("/products", {
    method: "GET",
    headers: {
      "Content-Type": "Application/Json",
    },
  });
const data = await res.json();
console.log("Product Data : ", data);
dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
} catch (error) {
  dispatch({ PRODUCT_LIST_FAILURE, payload: error });
}

};

**我在这里得到了数据**

但它显示产品在 HomeScreen.js

中未定义

Answer 1

Tro 在 HomeScreen 组件中添加未定义的检查并在其中 return 加载消息。
这应该避免导致您的应用程序崩溃，并在数据准备就绪后呈现数据。

...

if (!products) {
    return <div>Loading products...</div>
}

return (
 <div>
   {products.map((data, id) => {
     return (
       <div className="product_div" key={id}>
         <Products data={data} />
       </div>
     );
   })}
 </div>

我在从 useSelector 中获取数据时得到了未定义的数据

I got undefined data while getting it from useSelector in react

fetch

reactjs

redux