Question

嗨，我在教程上使用react js挂钩，尝试通过更新usestate中的数组来呈现登录页面，但我一直收到此错误TypeError：无法读取未定义的属性“ map”。我可能做错了什么？以下是以下代码：

着陆页：

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：无法读取未定义的React hooks错误的属性“ map”：

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

Answer 1

您尝试过吗？

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class MyScript : MonoBehaviour {
    protected Joystick joystick;
    protected Joybutton joybutton;
    protected bool jump;

    // Start is called before the first frame update
    void Start() {
        joystick = FindObjectOfType<Joystick>();
        joybutton = FindObjectOfType<Joybutton>();
    }

    // Update is called once per frame
    void Update() {
        var rigidbody = GetComponent<Rigidbody>();
        rigidbody.velocity = new Vector3(joystick.Horizontal * 100f,
                                         rigidbody.velocity.y,
                                         joystick.Vertical * 100f);
        if(!jump && joybutton.Pressed)
        {
            jump = true;
            rigidbody.velocity + Vector3.up * 100f;
        }
        if(jump && !joybutton.Pressed)
        {
            jump = false;
        }
    }
}

TypeError：无法读取未定义反应挂钩问题的属性“ map”

1 个答案: