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

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日
  • 展开全部

悬赏问题

  • ¥30 easy photo不能使用,求帮助
  • ¥15 c语言字符串单词入门问题报错
  • ¥30 我现在是双非人工智能专业不知道要不要转到软件工程专业
  • ¥15 请问12脉波整流机组的外特性曲线具体是如何推导
  • ¥15 abaqus里的python算法
  • ¥100 如何在思科模拟器中进入CEF模式
  • ¥15 Simulink 仿真如何使用MATLAB function模块获取到仿真过程中某一仿真时刻输入到模块的函数的值?
  • ¥50 关于#微信小程序#的问题:微信小程序支持h5实现webrtc h264 h265低延迟传输渲染,能付费帮我们解决一下吗
  • ¥20 请问ansys License manager 这个问题如何解决
  • ¥15 memory.limit()' is no longer supported