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调用setRankChangeFocus(value)时，我都希望Comp重新初始化自身。

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

Answer 1

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

Answer 2

您不能像useRef那样use hooks in conditions。

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

反应-出现“比上次渲染期间渲染了更多的挂钩”错误

2 个答案: