Реакция - ошибка «Отрисовано больше хуков, чем во время предыдущего рендера»

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

Вы не можете использовать хуки в условиях , как вы делаете с useRef.

Вызывать хуки только на верхнем уровне. Не вызывайте Hooks внутри циклов, условий или вложенных функций.