Как создать липкий заголовок в React, используя useEffect

Question

Я пытаюсь создать липкий заголовок в React, используя хук useEffect. Я думаю, что проблема связана с моим оператором IF logi c, но он просто пролетает над моей головой.

Кажется, что моя навигационная панель отлично держится при прокрутке, но при прокрутке вверх до вершины она не ' т "отклеить". Журнал консоли «застрял» показывает, что он, похоже, не изменяется от ложного ...

    const [ stuck, setStuck ] = useState(false);
    useEffect(() => {
        window.addEventListener('scroll', (e) => {
            console.log(stuck);
            if (stuck === false) {
                if (window.pageYOffset > 131) {
                    setStuck(true);
                    console.log('stuck');
                }
            } else {
                if (window.pageYOffset < 131) {
                    setStuck(false);
                    console.log('unStuck');
                }
            }
        });
    }, []);

, возвращая навигационную панель, которая выглядит примерно так ...

            <div
                className={classes.Links}
                style={
                    stuck ? (
                        { position: 'fixed', top: '0', width: '100%', left: '0' }
                    ) : (
                        { left: toggle ? '0' : '-100%' }
                    )
                }>
                <ul></ul>
              </div>

Любая помощь будет признателен, спасибо!

Answer 1

Так что это сложно. Когда вы используете хук useEffect, он получает замыкание на текущий экземпляр переменных в функции, поэтому при первом проходе переменной stuck присваивается значение по умолчанию false, которое функция стрелки в useEffect получает закрытие.

Когда вызывается setStuck, это изменит состояние компонентов и вызовет повторное рендеринг. Этот новый рендер будет снова проходить по всем логам c в вашей функции. Он вызовет useState, и это вернет ваше сохраненное значение для stuck, которое теперь истинно, но сохраняет его в новой ссылке. В вашем примере useEffect не имеет зависимостей, поэтому он не будет выполняться при последующих визуализациях. Функция, которую вы добавили в прослушиватель событий, все еще имеет замыкание на версию функции с момента последнего запуска, и, таким образом, для прослушивателя событий застрявшее значение равно false. Его закрытие взято из предыдущей версии функции.

В большинстве простых случаев вам просто нужно добавить stuck в качестве зависимости от вашего вызова к useEffect. Это приведет к его повторному запуску при изменении stuck и добавит обратный вызов с новым замыканием к правильному значению. Проблема здесь в том, что вам придется удалять обратный вызов каждый раз, когда вы хотите изменить состояние.

Поэтому я предлагаю, чтобы при вызове setStuck вы также использовали это время для удаления обработчика обратного вызова. Затем произойдет повторное рендеринг и добавит его обратно, но теперь с закрытием на правильные значения