javascript - 最后一个缩略图没有出现在视图中（react-responsive-carousel）

问题描述

我正在使用 react-responsive-carousel 显示一堆图像，但是当图像超过一定大小时，即缩略图部分是可滚动的，最后一个缩略图永远不会出现在视图中。现在我已经放入了水平滚动，但我想知道正常实现有什么问题。请帮我解决这个问题。这是代码：


import React, { Component } from "react";
import { connect } from 'react-redux';
import axios from 'axios';
import { Row, Col, message, Spin } from 'antd';
import { Carousel } from 'react-responsive-carousel';

import "../../../asset/style/manualmode/saved_images_app.css";
import "react-responsive-carousel/lib/styles/carousel.min.css";

class SavedImagesApp extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isFetching: false,
            images: [],
        }

    }

    componentDidMount = () => {
        this.getAllImages();
    }

    getAllImages = () => {
        this.setState({
            isFetching: true,
        });
        let url = some_url'
        axios.get(url)
            .then(response => {
                if (response.status === 200) {
                    this.setState({
                        isFetching: false,
                        images: response.data,
                    });
                }
                else {
                    console.log(response);
                    message.error("Not able to fetch images!!", 2.5);
                    this.setState({
                        isFetching: false,
                        images: [],
                    });
                }
            })
            .catch(err => {
                console.log(err);
                message.error("Not able to fetch images!!", 2.5);
                this.setState({
                    isFetching: false,
                    images: [],
                });
            })
    }

    getSlides = () => {
        let slides = [];
        for(let i = 0; i < this.state.images.length; i++) {
            let url = some_url' + this.state.images[i];
            slides.push(
                <div>
                    <img src={url} />
                </div>
            );
        }
        return slides;
    }

    render() {

        return (
            <Row className="app-parent overlayed-component saved-images-app-width">
                <div>
                    <Spin spinning={this.state.isFetching}>
                        <Row>
                            <Col span={24}>
                                <Carousel infiniteLoop useKeyboardArrows>
                                    {this.getSlides()}
                                </Carousel>
                            </Col>
                        </Row>
                    </Spin>
                </div>
            </Row>
        )
    }
}

const mapStateToProps = (state) => {
    return {
    }
}

export default connect(mapStateToProps)(SavedImagesApp);

标签： javascriptreactjsreact-responsive-carousel

javascript - 最后一个缩略图没有出现在视图中（react-responsive-carousel）

问题描述

解决方案

推荐阅读