Javascript 每次单击图像滑块按钮时，React onClick刷新页面？

因此，我的图像滑块显示了我的图像滑块前4次单击的刷新效果

因此，如果您检查my code Sandbox并在4幅图像中单击

next

或

prev

按钮，您将看到红色背景的轻微闪光

这是我的原型

刷新/闪存在您完成最后一张图像后立即停止，并且基本上会重置。我的数据数组中只有4个映射项，所以一旦单击所有图像，它似乎就停止刷新

我如何在每次点击图片时消除刷新

我尝试将e.preventDefault（）添加到我的next和prev滑动按钮函数的主体中，但这并没有阻止它

另外，是什么原因导致前四次点击的闪烁/刷新？如果你刷新页面并点击图片，它每次都会对前4张图片进行刷新

这就是我的next和prev函数的样子

        const nextSlide = () => {
          if (timeout.current) {
            clearTimeout(timeout.current);
          }
          setCurrent(current === length - 1 ? 0 : current + 1);
          console.log(current);
        };

        const prevSlide = () => {
          if (timeout.current) {
            clearTimeout(timeout.current);
          }
          setCurrent(current === 0 ? length - 1 : current - 1);
          console.log(current);
        };

---

您的问题是，在DOM呈现

并下载它之前，不会加载图像

您可以通过将图像url更改为base64路径来“绕过”此行为。只需使用像这样的转换器

例如，在Json文件中，将其更改为：


  {
    title: "Slide 3",
    image:
      "data:image/png;base64, /9j/4AAQSkZJRgABAQEASABIAAD/4......."
  }

其中逗号的右侧是base64转换后的图像

无论如何这不是最好的，因为您将在页面加载时加载所有图像，这可能非常不好

您应该尝试应用加载策略如所述
您确定不是图像加载吗？你在沙盒中描述的内容看起来像是从外部源向我加载图像，我不知道。为什么它只在前四次显示flash，但在它浏览完所有图像后，它会停止刷新？其他网站的图片幻灯片不会在图片幻灯片之间显示flash，所以它一定是在运行，这肯定是浏览器试图加载图片，你如何检查？我想用不透明度动画来摆脱这种情况，但不知道如何实现它，事先加载它，或者怎样预加载图像？另外，您认为添加不透明度动画会隐藏此刷新吗？如果是这样的话，你知道我如何实现它吗？@Johnxr刚刚在edit中回答说，它应该像10000行代码一样长吗？base64字符串就是编码后的图像。。。所以是的，它相当大。检查装载策略，以便放置某种装载机。。。。这将是一个很好的表现，对于4幅图像来说，有10万行代码不是很荒谬吗？我看到的大多数示例都在一行代码上显示base64，那么这怎么可能呢？