Рішення помилки React при встановленні висоти прокрутки div під час монтажу

8 Березня 2024 в 23:00 137

Placeholder

// multiple more

tags here

У розробці веб-додатків на React іноді виникає необхідність автоматично встановлювати висоту прокрутки певного елементу div при його монтажі. Це може бути зручно, наприклад, якщо потрібно, щоб користувач відразу бачив найновіший контент у додатку і міг прокручувати його вгору, щоб переглянути попередні записи. Проте, під час спроби виконати цю задачу за допомогою useEffect і useRef, може виникнути помилка, яка забороняє доступ до властивостей null. У цій статті ми розглянемо цю проблему та запропонуємо рішення для її вирішення.

Проблема

Розглянемо ситуацію, коли вам потрібно автоматично прокрутити контейнер div до його нижнього краю після монтажу компонента React. Наприклад, у вашому проекті є div, який містить декілька елементів

, і ви хочете, щоб при завантаженні сторінки він автоматично був прокручений до кінця, а потім користувачі могли б прокручувати його вгору, щоб переглянути попередні записи.

У вас може бути такий код:

const divRef = useRef(null);
const styles = {
    messageListContainer: {
        height: '100vh',
        width: '100%',
        paddingBottom: 20,
        flexDirection: "column",
        display: "flex",
        overflow: "auto",
    },
};
useEffect(() => {
    divRef.current.scrollTop = divRef.current.scrollHeight;
}, []);

const divRef = useRef(null);

const styles = {

messageListContainer: {

height: '100vh',

width: '100%',

paddingBottom: 20,

flexDirection: "column",

display: "flex",

overflow: "auto",

};

useEffect(() => {

divRef.current.scrollTop = divRef.current.scrollHeight;

}, []);

Цей код використовує useRef для створення посилання на div елемент, і в useEffect встановлюється scrollTop до scrollHeight div елемента. Однак, при спробі запустити цей код, може виникнути помилка: Cannot read properties of null (reading ‘scrollHeight’).

Причина

Причиною цієї помилки є те, що при першому виконанні useEffect ref ще не має значення, тому divRef.current є null, і спроба прочитати властивість scrollHeight з null призводить до помилки.

Рішення

Існує кілька способів вирішення цієї проблеми. Один з найпростіших – це перевірити, чи існує divRef перед спробою встановити scrollTop. Для цього можна змінити useEffect наступним чином:

useEffect(() => {
    if (divRef.current) {
        divRef.current.scrollTop = divRef.current.scrollHeight;
    }
}, []);

useEffect(() => {

if (divRef.current) {

divRef.current.scrollTop = divRef.current.scrollHeight;

}

}, []);

Це перевірить, чи divRef.current не null перед тим, як спробувати отримати доступ до його властивостей. Таким чином, помилка більше не виникає, і код працює як очікувалося.

Інший спосіб – це використання функції setState для встановлення висоти прокрутки div після того, як елемент створено. Це використовує підхід “функціонального оновлення” setState, який гарантує, що функція буде викликана після того, як компонент був встановлений.

Наприклад:

const [scrollHeight, setScrollHeight] = useState(0);
useEffect(() => {
    if (divRef.current) {
        setScrollHeight(divRef.current.scrollHeight);
    }
}, []);
useEffect(() => {
    if (scrollHeight > 0) {
        divRef.current.scrollTop = scrollHeight;
    }
}, [scrollHeight]);

const [scrollHeight, setScrollHeight] = useState(0);

useEffect(() => {

if (divRef.current) {

setScrollHeight(divRef.current.scrollHeight);

}

}, []);

useEffect(() => {

if (scrollHeight > 0) {

divRef.current.scrollTop = scrollHeight;

}

}, [scrollHeight]);

У цьому випадку ми використовуємо useState для збереження scrollHeight, а потім викликаємо setScrollHeight з scrollHeight div після першого рендерингу. Потім ми використовуємо другий useEffect, який спрацьовує при зміні scrollHeight, щоб встановити висоту прокрутки div.

Висновок

Під час розробки веб-додатків на React важливо пам’ятати про можливі проблеми, які можуть виникнути під час монтажу компонентів і використання ефектів. Помилка “Cannot read properties of null (reading ‘scrollHeight’)” в React виникає, коли ми намагаємося отримати доступ до властивостей null, що може виникнути при спробі встановити висоту прокрутки div під час монтажу. Однак, її можна легко уникнути, перевіривши, чи існує ref перед спробою доступу до його властивостей або використовуючи setState для установки висоти прокрутки після монтажу.