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

Question

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

这是 codesandbox 上的现场演示 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 props 应该是 functions，而不是 function calls.

所以这个

onClick={setSlideIndex(0)}

应该是这样的：

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

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

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

React limits the number of renders to prevent an infinite loop - react hooks

javascript

reactjs

slick.js

react-slick