React 限制渲染次数以防止无限循环 - react hooks

问题描述

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

这是关于 codeandBox 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

这里出了什么问题？

解决方法

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

所以这个

onClick={setSlideIndex(0)}

应该是这样的：

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

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