React:渲染的钩子比上一次渲染时多?反作用弹簧

Question

我在SO上看到过关于这个错误的类似问题，但我无法解决下面的问题

情况

此链接的代码有效：

https://codesandbox.io/s/frosty-water-118xp?file=/src/App.js

然而，我不喜欢它的地方是，我需要在"幻灯片"数组中重复自己，通过一次又一次地概述幻灯片结构(如您从第78行到第131行所见(。

我试图用一个函数来代替这种方法，该函数将根据需要生成带有必要信息的幻灯片。例如，我会将所有幻灯片信息保存在这样的数组中：

const slideInformation = [
{
src: Image1,
bigText: "ONE",
littleText: "one",
},
{
src: Image2,
bigText: "TWO",
littleText: "two",
},
{
src: Image3,
bigText: "THREE",
littleText: "three",
},
];

并在需要时将该信息传递给第171行上的转换函数的返回语句，如下所示：

{transitions((style, i) => {
const Slide = SlideFactory(style, slideInformation[i]);
return <Slide />;
})}

问题

然而，当我这样做时，当第一张幻灯片变为第二张幻灯片时，我得到以下错误：；错误：渲染的钩子比上一次渲染时多">

为什么不起作用

你可以在这里看到我对这个解决方案的尝试(不起作用(：

https://codesandbox.io/s/adoring-mountain-bgd07?file=/src/App.js

Answer 1

与其让SlideFactory成为渲染应用程序时调用的辅助函数，不如将其变成自己的组件。使用helper函数版本，您可以更改从一个渲染到下一个渲染调用SlideFactory的次数，这反过来又会更改应用程序调用的钩子数量，从而违反钩子的规则。

但如果你把它作为一个组件来做，那么改变App返回的组件数量是完全可以的，当这些组件渲染时，它们每个只调用一个钩子。

// You should name this using the `use` convention so that it's clear (to both
//   humans and lint tools) that it needs to follow the rules of hooks
const useZoomSpring = () => {
return useSpring({
from: { number: 1.0 },
to: { number: 1.1 },
config: { duration: duration },
});
};
// It now expects a props object, not two separate parameters
const SlideFactory = ({ style, index }) => {
const zoom = useZoomSpring();
return (
<SlideContainer style={style}>
<ImageContainer
src={slideInformation[index].src}
style={{
...style,
scale: zoom.number.to((n) => n),
}}
/>
<BigText>{slideInformation[index].bigText}</BigText>
<LittleText>{slideInformation[index].littleText}</LittleText>
</SlideContainer>
);
}
// ...
{transitions((style, i) => {
// creating a JSX element, not calling a function
return <SlideFactory style={style} index={i}/>
})}