javascript - TypeError：无法在反应 redux 中读取未定义的属性（读取“地图”）

问题描述

我正在尝试创建一个简单的 Web 应用程序，它使用 REACT REDUX 列出来自 fakestore api 的产品。但是反应抛出错误“TypeError：无法读取未定义的属性（读取'map'）”。

productListing.jsx

import React, { useEffect } from 'react';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { setProducts } from '../redux/actions/productActions';
import ProductComponent from './ProductComponent';

const ProductListing = () => {
    // const products = useSelector((state) => state.allProducts.products);
    const dispatch = useDispatch()

    const fetchProducts = async () => {
        const response = await axios
          .get("https://fakestoreapi.com/products")
          .catch((err) => {
            console.log("Err: ", err);
          });
        dispatch(setProducts(response.data));
        console.log(response.data)

      };
    

    useEffect(() => {
        fetchProducts()
        },[])
    // console.log("Products :" , products)

    return (
        <div className="ui grid container">
            <ProductComponent />
        </div>
    );
};

export default ProductListing;

上述组件负责从 fakestoreapi 调用 api 并更新 redux 存储。

在以下名为“productComponent.jsx”的组件中，我尝试使用 map 方法列出来自 redux 商店的产品，如下所示：

import React from 'react'
import { useSelector } from 'react-redux'

const ProductComponent = () => {
    const pdts = useSelector((state) => state.allProducts.products);

    // console.log(typeof(pdts))


    console.log("Products",pdts)
    const renderList = pdts.map((pdt) => {

        // const { id, title, image, price, category } = pdt;
        return(
            <div className="four column wide" key={pdt.id}>
            <div className="ui link cards">
                <div className="card">
                    <div className="image">
                        <img src={pdt.image} alt={pdt.title}  />
                    </div>
                    <div className="content">
                        <div className="header">{pdt.title}</div>
                        <div className="meta price">$ {pdt.price}</div>
                        <div className="meta">{pdt.category}</div>
                    </div>
                </div>
            </div>
        </div>
        )
    })

    
    return(
        <>{renderList}</>
        // <>gbdf</>
    )
    
}

export default ProductComponent

但是 React 抛出以下错误：错误图像

当我安慰产品对象时，它显示未定义。但是在我评论了渲染列表并再次控制了产品对象之后，它控制了两次，第一次是未定义的，第二次用值打印正确的对象。此时我取消了渲染列表的注释，现在反应列出了产品，但是当我再次重新加载页面时，它两次控制台未定义值。

标签： javascriptreactjsredux

javascript - TypeError：无法在反应 redux 中读取未定义的属性（读取“地图”）

问题描述

解决方案

推荐阅读