Question

我在 SO 上看到了关于此错误的类似问题，但我无法在下面解决我的问题。

情况

此链接中的代码有效：

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

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

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

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

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

{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 成为您在渲染 App 时调用的辅助函数，不如将其变成自己的组件。使用辅助函数版本，您可以更改从一个渲染到下一个渲染调用 SlideFactory 的次数，这反过来又会更改 App 调用的钩子数量，从而违反了 rules of hooks。

但是如果你把它作为一个组件来做，那么改变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}/>
})}

React：渲染的钩子比之前的渲染多？反应弹簧

1 个答案: