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

【问题标题】：React - getting "Rendered more hooks than during the previous render" errorReact - 出现“渲染的钩子比上一次渲染时更多”错误
【发布时间】：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) 时重新初始化。

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

【问题讨论】：

标签： reactjs react-hooks

【解决方案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。

【讨论】：