我有以下组件：

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

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