Question

请帮帮我！当我正在进行这个 React + Django 电子商务项目时，我遇到了这个问题。当我尝试将 Redux 带到主屏幕时会发生这种情况。我商店中的产品列表无法加载并返回“类型错误：无法读取未定义的属性‘地图’”。

以下是我的代码，请帮助我。谢谢。

主屏幕

import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import { listProducts } from "../actions/productActions";

function HomeScreen() {
  const dispatch = useDispatch();
  const productList = useSelector((state) => state.productList);
  const { error, loading, products } = productList;
  useEffect(() => {
    dispatch(listProducts());
  }, []);

  return (
    <div>
      <h1>Latest Products</h1>
      <Row>
        {products.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}
      </Row>
    </div>
  );
}

export default HomeScreen;

产品操作

import axios from 'axios'
import { 
    PRODUCT_LIST_REQUEST,
    PRODUCT_LIST_SUCCESS,
    PRODUCT_LIST_FAIL
 } from '../constants/productConstants'

 export const listProducts = () => async (dispatch) => {
    try{
        dispatch({ type: PRODUCT_LIST_REQUEST})

        

        const { data } = await axios.get('/api/products/')

        dispatch({
            type:PRODUCT_LIST_SUCCESS,
            payload: data
        })
    }catch(error){
            dispatch({
                type:PRODUCT_LIST_FAIL,
                payload:error.response && error.response.data.message
                    ? error.response.data.message
                    : error.message,
            })
    }
 }

Screenshot of the problem

Answer 1

在从服务器获取数据时的异步函数中，您应该使用条件渲染。在反应代码中尝试一下：

之前：

{products.map((product) => (
          <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
            <Product product={product} />
          </Col>
        ))}

之后：

{products && products.map((product) => (
              <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                <Product product={product} />
              </Col>
            ))}

告诉我它是否有效。

类型错误：无法读取未定义的属性“地图”-反应 js

1 个答案: