javascript - TypeError：无法读取未定义反应钩子问题的属性“地图”

问题描述

嗨，我在教程中使用 react js 挂钩，尝试通过更新 usestate 中的数组来呈现登录页面，但我不断收到此错误 TypeError: Cannot read property 'map' of undefined. 我可能做错了什么？以下是以下代码：

登陆页面：

import React, {useEffect, useState} from 'react';
import Axios from 'axios';
import {Icon, Col, Card, Row} from 'antd';
import ImageSlider from '../../utils/ImageSlider';

const {Meta} = Card;

function LandingPage() {

    const [Products, setProducts] = useState([]);
    const [Skip, setSkip] = useState(0)
    const [Limit, setLimit] = useState(8)
    const [PostSize, setPostSize] = useState(0)


    useEffect(() => {
        const variables = {
            skip: Skip,
            limit: Limit,
        }

        getProducts(variables)


    }, [])


    const getProducts = (variables) => {
        Axios.post('/api/product/getProducts', variables)
        .then(response => {
            if (response.data.success) {

                setProducts([...Products, response.data.products])

                setPostSize(response.data.postSize)


            } else {
                alert('Failed to fetch product datas')
            }
        })
    }


    const onLoadMore = (event) => {
        let skip = Skip + Limit;

        const variables = {
            skip: skip,
            limit: Limit,
        }

        getProducts(variables)
    }


    const renderCards = Products.map((product, index) => {
        return <Col key={index} lg={6} md={8} sm={24}>
            <Card
                hoverable={true}
                cover={<ImageSlider images={product.images} />}
            >

                <Meta
                    title={product.title}
                    description={`$${product.price}`}
                />

            </Card>
        </Col>
    })

这是接收道具的滑块组件：

import React from 'react'
import { Carousel } from 'antd';

function ImageSlider(props) {
    return (
        <div>
            <Carousel autoplay>
                {props.images.map((image, index) => (
                    <div key={index}>
                        <img
                         style={{ width: '100%', maxHeight: '150px' }}
                         src={`http://localhost:5000/${image}`} alt="productImage" />
                    </div>
                ))}
            </Carousel>
        </div>
    )
}

export default ImageSlider

还要指出一件事，当我使用它时，应用程序工作：

setProducts(response.data.products)

但是，我希望能够以状态显示以前的产品以及新添加的产品，所以当我这样做时，我得到 TypeError: Cannot read property 'map' of undefined react hooks 错误：

setProducts([...Products, response.data.products])

标签： javascriptarraysreactjsreact-hooks

javascript - TypeError：无法读取未定义反应钩子问题的属性“地图”

问题描述

解决方案

推荐阅读