时间戳

首页 > 解决方案 > Carousel React JS、JSON、JSX TypeError：无法读取未定义的属性“”

reactjs - Carousel React JS、JSON、JSX TypeError：无法读取未定义的属性“”

问题描述

我刚开始反应 js，我是新来的，如果我把问题写得难以辨认，我很抱歉我想用 JSON.Data 做轮播，但我只能显示一张照片，我不能做滑动照片。我希望有人能帮助我。

在此处输入图像描述

数据.json

   {
  "Slajd":[
    {
        "id": 1,
        "name": "title",
        "image": [
           "https://cf.bstatic.com/images/hotel/max1024x768/263/263731269.jpg",
           "https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
        ]
   }
  ]
}

JSX

 import React from 'react';
import { Container, Carousel, CarouselItem, CarouselProps } from 'react-bootstrap';
export function Slider({ data }) {
    return(
             <Carousel>
                 <Carousel.Item interval={1000}>
                 <img
                   className="d-block w-100"
                   src={data.image}
                   />
               </Carousel.Item>
            </Carousel>
        );
}

应用程序.js

function App() {
  return(
      <Container>
       {photo.Slajd.map(data => (
       <Carousel xs={3} key={data.id}>
         {data.image.map(imgSrc => (
        <Slider imgSrc={imgSrc}/>
         ))}
         </Carousel>
       ))}
      </Container>
  );
}

标签： reactjscarouselreact-bootstrap

解决方案

第一个提示，尝试放置debugger并查看JSON 返回的data内容。photo你也可以这样做console.log。

其次，正如我所见，您正在遍历幻灯片，然后遍历图像 URL 并将该 URL 作为imgSrcprop 传递给 Slider 组件，但在 Slider 组件中，您试图获取dataprop 而不是imgSrc.

尝试像这样改变：

import React from 'react';
import { Container, Carousel, CarouselItem, CarouselProps } from 'react-bootstrap';
export function Slider({ imgSrc }) {
    return(
             <Carousel>
                 <Carousel.Item interval={1000}>
                 <img
                   className="d-block w-100"
                   src={imgSrc}
                   />
               </Carousel.Item>
            </Carousel>
        );
}

推荐阅读