时间戳

首页 > 解决方案 > React 限制渲染的数量以防止无限循环 - 反应钩子

javascript - React 限制渲染的数量以防止无限循环 - 反应钩子

问题描述

我有一个简单的部分，其中包含一个光滑的滑块，我希望单击一个按钮，例如按钮 1，它应该打开一个特定的幻灯片。

这是关于代码沙盒的现场演示 slick go to slide

这是js代码

import React, { useRef, useState, useEffect } from "react";
import Slider from "react-slick";

export default function APP() {
  const sliderRef = useRef();
  const [slideIndex, setSlideIndex] = useState(0);

  var settings = {
    dots: true
  };

  useEffect(() => {
    sliderRef.current.slickGoTo(slideIndex);
  }, [slideIndex]);

  return (
    <div className="container">
      <Slider {...settings} ref={sliderRef}>
        <div>
          <img src="http://placekitten.com/g/400/200" />
          <button onClick={setSlideIndex(0)}>btn 1</button>
          <button onClick={setSlideIndex(1)}>btn 2</button>
          <button onClick={setSlideIndex(2)}>btn 3</button>
        </div>
        <div>
          <img src="http://placekitten.com/g/400/200" />
        </div>
        <div>
          <img src="http://placekitten.com/g/400/200" />
        </div>
        <div>
          <img src="http://placekitten.com/g/400/200" />
        </div>
      </Slider>
    </div>
  );
}

但我收到以下错误

Too many re-renders. React limits the number of renders to prevent an infinite loop

这里有什么问题？

标签： javascriptreactjsslick.jsreact-slick

解决方案

你的onClick道具应该是函数，而不是函数调用。

所以这

onClick={setSlideIndex(0)}

应该是这样的：

onClick={() => setSlideIndex(0)}

您现在拥有它的方式，该函数在组件呈现时被调用。并且函数改变状态，导致重新渲染，再次调用该函数，触发状态改变等等->无限循环

推荐阅读