javascript - “ TypeError: Cannot read property 'map' of undefined” 当我在 react 中使用迭代数组的响应列表时出现此错误

问题描述

嗨，我正在使用 react 和 redux 钩子，我无法迭代我的 Array 它的显示错误“TypeError: Cannot read property 'map' of undefined” 我在过去 2 天面临这个问题。我可能做错了什么？下面是代码。我是新来的反应，请也提出改进我的代码标准的建议：

新产品组件.js

  import React, { Fragment, useState, useEffect } from "react";
import SidebarRight from "./SidebarRight.component";
import m1 from "../assets/images/m1.jpg";
import m2 from "../assets/images/m2.jpg";
import m3 from "../assets/images/m3.jpg";
import m4 from "../assets/images/m4.jpg";
import m5 from "../assets/images/m5.jpg";
import m6 from "../assets/images/m6.jpg";
import m7 from "../assets/images/m7.jpg";
import m8 from "../assets/images/m8.jpg";
import m9 from "../assets/images/m9.jpg";
import image1 from "../assets/images/image1.png";
import UserService from "../Service/user.service";
import { Link } from "react-router-dom";
import {useDispatch, useSelector} from 'react-redux'
import ProductDetails from "./Product/ProductDetails.component";
import { listProduct } from "../Service/Actions/productAction";
import newProduct from "./Product/newProduct";

export default function NewProduct() {

  const dispatch = useDispatch();
  const [product, setproduct] = useState([]);
  const [isPDetails, setisPDetails] = useState(true)
  const productList = useSelector(state => state.productListReducer)
  const products = productList.products; 
  useEffect(()=>{
    console.log("render data ")
    dispatch(listProduct());
    setproduct([...product,...productList])
  },[])
  console.log("all product ",productList)

  // useEffect(() => {
  //   UserService.getPublicContent().then(
  //     (response) => {
  //       console.log(response);
  //       setproduct(response.data.post);
  //     },
  //     (error) => {
  //       const _content =
  //         (error.response && error.response.data) ||
  //         error.message ||
  //         error.toString();
  //       setproduct(_content);
  //     }
  //   );
  // }, []);
//  const  handleProductDetails = () =>{
//   setisPDetails(false)
//  }
 
  let productList1;
  let data1 = []
  // setproduct(products.post)
  let data = [{name:"p"},{name:'data'},{name:"frw"}]
  data1.push(products)
  console.log(data1)
  productList1 = product.map((product,index)=>{
    
    debugger
    return (
      // <newProduct res={res}></newProduct>
    <h3 key={index}>Data rendeing {product.price}</h3>
    )

    
  })
  // // productList1 = ({ data }) => {
  //   return (
  //     <Fragment>
        
  //     </Fragment>
  //   )
  // }
  // let proListArray = products.post;
  // if (products) {
  //   productList1 = proListArray.map((res) => {
  //     return (
  //       <newProduct res={res}/>
  //     );
  //   });
  // } 
      return (
        <Fragment>{productList1}
    </fragment>)

productReducer.js

import {PRODUCT_LIST_REQUEST,PRODUCT_LIST_SUCCESS,PRODUCT_LIST_FAIL} from '../Constents'


export const productListReducer = (state = {products:[]},action) =>{
    switch (action.type) {
        case PRODUCT_LIST_REQUEST:
            return {loading:true};
        case PRODUCT_LIST_SUCCESS:
            return {loading:false,products:action.payload}
        case PRODUCT_LIST_FAIL:
            return {loading:false,products:action.payload}
        default:
            return state;
    }
}


productAction.js

从'axios'导入Axios；从“../Constents”导入 {PRODUCT_LIST_REQUEST,PRODUCT_LIST_SUCCESS,PRODUCT_LIST_FAIL}

export const listProduct = () => async (dispatch) =>{ dispatch({ type:PRODUCT_LIST_REQUEST }); 尝试 { const {data} = await Axios.get('http://localhost:5000/api/product/allProduct'); console.log("Action for check", data.post) dispatch({ type:PRODUCT_LIST_SUCCESS, payload:data.post }) } catch (error) { dispatch({type:PRODUCT_LIST_FAIL,payload:error}) } }

我的 Api 在 node.js 中的数组响应

Array Redux 存储的图像

在此处输入图像描述

标签： javascriptjsonreactjsreduxreact-router

javascript - “ TypeError: Cannot read property 'map' of undefined” 当我在 react 中使用迭代数组的响应列表时出现此错误

问题描述

解决方案

推荐阅读