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

Question

我有一个简单的部分，其中包含一个光滑的滑块，我希望单击按钮，例如按钮 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

这里有什么问题？

Answer 1

您的onClick 属性应该是函数，而不是函数调用。

所以这个

onClick={setSlideIndex(0)}

应该是这样的：

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

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