时间戳

首页 > 解决方案 > react-redux 状态在 redux devTools 中工作，但无法将其呈现到页面？

node.js - react-redux 状态在 redux devTools 中工作，但无法将其呈现到页面？

问题描述

我正在尝试使用 react-redux 向我的后端发出 get 请求，当我查看 redux 开发工具时，我看到状态已更新并且产品已放入状态中（这很好），但是当我尝试映射产品或console.log(products)它给我未定义，我正在学习一个教程，我正在完全按照教练的方式做，这是我的代码我做错了什么？

import { useDispatch, useSelector } from "react-redux";
import { listProducts } from "../../actions/productActions";

const Home = () => {
  const dispatch = useDispatch();

  const productList = useSelector((state) => state.productList);
  const { loading, error, products } = productList;

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

  return <div className="card-div mt-5">{products.map((product) => {
        <h1>{product.name}</h1>;
      })}</div>; //TypeError: Cannot read property 'map' of undefined
};

这是我的开发工具，可确保您更新状态并正确获取数据：

行动

产品列表

标签： node.jsreactjsreduxreact-reduxredux-thunk

解决方案

在尝试映射它们之前检查 productList 是否存在。

尝试这个：

const Home = () => {
    const dispatch = useDispatch();

    const productList = useSelector((state) => state.productList);
    const { loading, error, products } = productList;

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

    return <div className="card-div mt-5">{!! products && products.map((product) => {
        <h1>{product.name}</h1>;
    })}</div>; //TypeError: Cannot read property 'map' of undefined
};

尝试将 listProducts 添加到您的 useEffect 调用的参数数组中。

推荐阅读