React - 出现“渲染的钩子比上一次渲染时更多”错误

Posted 2023-03-10

【中文标题】React - 出现“渲染的钩子比上一次渲染时更多”错误

【英文标题】：React - getting "Rendered more hooks than during the previous render" error

【发布时间】：2020-07-10 02:36:35

【问题描述】：

我有以下组件：

const [eventCounter, setEventCounter] = useState(0)

let subsectionRefs = data ? Object.values(data).reduce((acc, event) => 
    acc[event.id] = useRef();
    return acc;
, ) : ;

    const setRankChangeFocus = eventID => 
    setEventCounter(eventCounter + 1);
    window.scrollTo(0, subsectionRefs[eventID].current.offsetTop);
;

return (
                    <Comp
                        key=event.id
                        onRankChange=(value) => 
                            setRankChangeFocus(value);
                        
                    />

)

基本上，我希望subsectionRefs 每次从子组件Comp 调用setRankChangeFocus(value) 时重新初始化。

但是，当我加载页面时，我收到“渲染的钩子比上一次渲染期间更多”错误 - 为什么？我做错了什么？

【参考方案1】：

你不能像 use hooks in conditions 那样使用 useRef。

只在顶层调用 Hooks。不要在循环、条件或嵌套函数中调用 Hook。

【讨论】：

不知道为什么？什么条件？不使用状态挂钩，一切正常。

您使用的是条件运算符的三元运算符。 developer.mozilla.org/en-US/docs/Web/javascript/Reference/…，检查你的 linter 错误，你应该得到一个错误。

好的，但它再次起作用.. 只是在我引入 setState 钩子之后，它才开始给我这个错误。

至于钩子是如何实现的，它们必须以特定的顺序调用，我猜在条件添加错误之前添加另一个钩子。如果您想获得更多见解，您应该按预期制作一个可生产的示例，但无论哪种方式，您的代码都应该被修复，因为它是错误的（尝试在您的项目中添加一个 linter）。

【参考方案2】：

您正在从 setRankChangeFocus 中调用您的 setEventCounter 函数，这既不是自定义钩子，也不是适当的 React 函数组件。请参阅Rules of Hooks。