TypeError: Невозможно прочитать свойство 'map' из-за неопределенной проблемы реакционных хуков

Question

Привет, я использую реагирующий js хук на уроке, пытаюсь визуализировать целевую страницу путем обновления массива в usestate, но я продолжаю получать эту ошибку TypeError: Невозможно прочитать свойство 'map' 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)

Однако я хочу иметь возможность отображать предыдущие продукты в состоянии, а также недавно добавленные, поэтому, когда я делаю это, я получаю Ошибка типа: не удалось прочитать свойство 'map' неопределенной ошибки реакционных хуков:

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

Answer 1

Вы пробовали это?

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