TypeError：无法读取长度未定义的属性？ - 反应轮播答案

【问题标题】：TypeError: cannot read property of length undefined? - React CarouselTypeError：无法读取长度未定义的属性？ - 反应轮播
【发布时间】：2021-09-18 05:01:26
【问题描述】：

遵循本教程 here 正是因为我想在我的网站上使用这个轮播。

但是我得到错误“TypeError：无法读取未定义的属性”，即使代码与教程完全相同并且教程讲师从未遇到此错误。

我该如何解决这个问题？
为什么我会收到此错误，而教程讲师却没有？很难理解这是怎么发生的 - 该视频仅来自 2020 年 12 月

提前致谢。

代码如下：

import React, {useState} from 'react';
import styled from 'styled-components'
import { CarouselData } from '../Data/CarouselData';
import {FaArrowAltCircleRight, FaArrowAltCircleLeft} from 'react-icons/fa';

export const Carousel = ({slides}) => {

    const [current, setCurrent] = useState(0);
    const length = slides.length;

    const nextSlide = () => {
        setCurrent(current === length -1 ? 0 : current + 1)
    }
    const prevSlide = () => {
        setCurrent(current === length -1 ? 0 : current + 1);
    }

    console.log(current);
    if (!Array.isArray(slides) || slides.length <= 0){
        return null;
    }


    return (
        <div>
            <Section>
                <LeftArrow >
                    <FaArrowAltCircleLeft onClick={prevSlide}/>
                </LeftArrow>
                {CarouselData.map((slide, index) => {
                    return(
                        <img style={{width: "400px", height: "600px", borderRadius: "10px"}} src={slide.image} alt="image" />
                    )
                })}
                <RightArrow >
                    <FaArrowAltCircleRight onClick={nextSlide}/>
                </RightArrow>
            </Section>
            
        </div>
    )
}

const Section = styled.div`
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`
const LeftArrow = styled.div`
    position: absolute;
    top: 50%;
    left: 32px;
    font-size: 3rem;
    color: white;
    z-index: 10;
    cursor: pointer;
    user-select: none;

`
const RightArrow = styled.div`
    position: absolute;
    top: 50%;
    right: 32px;
    font-size: 3rem;
    color: white;
    z-index: 10;
    cursor: pointer;
    user-select: none;
`
const Image = styled.div`
    display: inline-block;
    width: 100px;
    height: 400px;
    border-radius: 10px;
`

附： - 如果需要一个代码框，我会做一个，但是这是一个小代码文件和小问题，所以认为不需要

【问题讨论】：

slides 是否在这里未定义？
密码箱总是很有帮助的。很多时候，您会在创建代码框时发现问题，甚至不需要编写问题。
那么现在就做一个！
您能否展示一下您如何将幻灯片作为道具发送？
Lmao Chris 我只是通过创建一个足够公平的代码框来解决它，你没有错！ - 大卫你在球我忘记在我展示它的投资组合页面中添加幻灯片作为我的功能的道具

标签： javascript reactjs typeerror

【解决方案1】：

错误来自没有将幻灯片作为道具放在我的父组件 PortfolioPage 中。

请参阅下面的代码 - 在我的函数 PortfolioPage 的括号为空之前 - 因此为什么幻灯片现在在添加幻灯片后未定义。


export const PortfolioPage = (slides) => {
    return (
        <div style={{ height: "100vh"}}>
            <Container>
                <Grid container>
                    <Grid item md={6}>
                        <TopSection>

                        </TopSection>
                    </Grid>
                    <Grid item md={6}>
                        <BottomSection>
                            <Carousel slides={CarouselData}/>

                            
                    

                        </BottomSection>
                    </Grid>
                </Grid>
            </Container>
        </div>
    )
}

【讨论】：