Ken428965 2022-09-29 20:37 采纳率: 53.4%
浏览 249
已结题

react,使用ant mobile里的swiper走马灯组件,axios获取轮播图数据报错?

在使用的react版本如下:

img

使用ant mobile里的走马灯组件 https://mobile.ant.design/zh/components/swiper 展示轮播图,
轮播图的接口地址为 http://localhost:8080/home/swiper
使用postman测试过接口地址,能成功获取到数据:

img

已写的代码如下:

import React from 'react';
import { Space, Swiper } from 'antd-mobile';
import './style.css';
import axios from 'axios';
const colors = ['', '', '', ''];
const items = colors.map((color, index) => (<Swiper.Item key={index}>
    <div className={"content"} style={{ background: color }}>
      <img src={require(`http://localhost:8080${item.imgSrc}`)} />
    </div>
  </Swiper.Item>));
export default () => {
  state = {
    // 轮播图状态数据
    swipers: []
  }
  // 获取轮播图数据的方法
  getSwipers() {
    const res = axios.get('http://localhost/home/swiper')
    this.setState({
        swipers: res.data.body
      })
  }
  componentDidMount() {
    this.getSwipers()
  }

    return (
        <Space direction='vertical' block>
          <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay>
            {items}
          </Swiper>
        </Space>
    );
};

vscode界面显示语法错误:

img

chrome浏览器报错如下:

img

请问代码出了什么问题?应该如何修改?

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-09-30 09:22
    关注

    建议 最好给个根元素 。

    return(
    <>
      <Space>
    </Space>
    </>
    )
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 10月4日
  • 已采纳回答 9月30日
  • 修改了问题 9月30日
  • 修改了问题 9月29日
  • 展开全部

悬赏问题

  • ¥100 照片生成3D人脸视频
  • ¥15 伪装视频时长问题修改MP4的时长问题,
  • ¥15 JETSON NANO
  • ¥15 VS开发qt时如何在paintgl函数中用pushbutton控制切换纹理
  • ¥20 关于 openpyxl 处理excel文件地问题
  • ¥15 MS中不知道高分子的构型怎么构建模型
  • ¥60 QQOP数据,什么是op数据号,怎么提取op数据!能不能大量提取(语言-c语言)
  • ¥15 matlab代码 关于微分方程和嵌套的分段函数。
  • ¥15 onlyoffice编辑完后立即下载,下载的不是最新编辑的文档
  • ¥15 求caverdock使用教程