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

【问题标题】：react-redux state works in redux devTools but can't render it to the page?react-redux 状态在 redux devTools 中工作，但无法将其呈现到页面？
【发布时间】：2021-04-19 13:08:13
【问题描述】：

我正在尝试使用 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
};

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

actions

products list

【问题讨论】：

const { 加载，错误，产品 } = productList;您正在将一个数组分配给一个对象，然后您需要从一个对象的元素中获取该数组。这是不可能映射的。您应该将 productList 数组分配给产品数组，然后映射该产品。希望它会有所帮助。
@Shoaib const { loading, error, products } = productList; 中的 products 是对象内的一个数组，我看不出有什么问题。你会建议什么改变？

标签： node.js reactjs redux react-redux redux-thunk

【解决方案1】：

在尝试映射之前检查 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 调用的参数数组中。

【讨论】：

试过了：我没有收到错误但列表项没有呈现
我认为数组是productList，而不是products？？
我已经更新了问题中的（产品列表）图像，看到 productList 是一个对象，并且在该对象内部有 products 是一个数组！
那么 products 数组的路径应该是 productList.products
在const { loading, error, products } = productList;中与products没有区别