React：渲染了比上一次渲染更多的钩子？反应-spring

Question

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

情况

link 处的代码有效：

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 的组件数量是完全没问题的 returns，当这些组件呈现时，它们只会调用一个钩子。

// 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：渲染了比上一次渲染更多的钩子？反应-spring

React: Rendered more hooks than during the previous render? React-spring

javascript

reactjs

react-spring

react-hooks