React - the“render more hooks the previous render”错误

Question

我有以下组件：

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)时重新初始化自身。

然而，当我加载页面时，我得到了“render more hooks the the previous render”错误-为什么？我做错了什么？

Answer 1

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

Answer 2

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

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