无法修复反应中的轮播算法

问题描述

我的 react.js 项目中有一个幻灯片轮播，没有使用任何库。当我使用奇怪数量的图像时，一切正常。但是当我使用偶数时，虽然 currentIndex 正确改变，但在这个例子中只有奇数图像显示为 1,3,5，有六个图像。任何人都可以发现我的代码有什么问题，所以它不仅可以处理奇怪的图像，还可以处理一定数量的图像？非常感谢

import React from 'react';
import Slide from './Slide';

import img1 from "../assets/img1.jpg";
import img2 from "../assets/img2.jpg";
import img3 from "../assets/img3.jpg";
import img4 from "../assets/img4.jpg";
import img5 from "../assets/img5.jpg";
import img6 from "../assets/img6.jpg";



class Test extends React.Component {
        state = {
        currentIndex: 0,images: [img1,img2,img3,img4,img5,img6]
        }

        prevSlide = () => {
        const lastIndex = this.state.images.length - 1;
        const resetIndex = this.state.currentIndex === 0;
        const index = resetIndex ? lastIndex : this.state.currentIndex - 1;
        this.setState({
          currentIndex: index
        });
      };

      nextSlide = () => {
        const lastIndex = this.state.images.length - 1;
        const resetIndex = this.state.currentIndex === lastIndex;
        const index = resetIndex ? 0 : this.state.currentIndex + 1;
        this.setState({
          currentIndex: index
        });
      };
    
      render() {
        const index = this.state.currentIndex;
        let newImagesArray = this.state.images.slice(index,index + 6);
        if (newImagesArray.length < 6) {
          newImagesArray = newImagesArray.concat(
            this.state.images.slice(0,6 - newImagesArray.length)
          );
        }
        return (
          <div className="paint__container">
            {newImagesArray.map((image,i) =>
              this.state.currentIndex === i ? (
                <Slide key={i} url={image} alt="" />
              ) : null
            )}
                <div className="left__arrow" onClick={this.prevSlide}></div>
                <div className="right__arrow" onClick={this.nextSlide}></div>
          </div>
        );
    }
}

export default Test;

解决方法

好的，感谢您提供完整的代码，查看 github

上的组件

我们可以找到

• 你有 nextSlide 定义了两次，我猜第二个会覆盖第一个声明

• 当您有 currentIndex 时，为什么要在渲染函数中搜索目标幻灯片？你不必这样做，我的朋友，虽然 currentIndex 正确计算了索引，然后你只需在该索引处渲染幻灯片，这就是我们毕竟使用 react 的原因

render() {
    const index = this.state.currentIndex;
    const images = this.state.images;

    return (
        <div className="paint__container">
            <Slide url={images[index]} alt="" />
            <div className="left__arrow" onClick={this.prevSlide}></div>
            <div className="right__arrow" onClick={this.nextSlide}></div>
        </div>
    );
}