TypeError: Невозможно прочитать свойство 'scrollIntoView' из null в таблице React

Question

const modal =({messages})=>{

   const messagesEnd = React.useRef(null);

   const scrollToBottom = () => {

        messagesEnd.current.scrollIntoView({ behavior: "smooth" });
    };

   useEffect(() => {

          scrollToBottom();

    }, []); 

    const messagesComp = (single_message)=>{
        <TableRow>
        <div>
        <p>{single_message}</p>
        </div>
        </TableRow>
    }
    return (

        <div>
        <Table>
        <TableBody>
        {messages ? messages.map(item, index => {
            if(messages.length === index+1){
               return  <div ref={messagesEnd}>messagesComp(item)</div>    
            }else{
                messagesComp(item)
            }
        }
        ) : null}
        </TableBody>
        </Table>
        </div>

    );
}

Я создал приложение, в котором при нажатии на кнопку появляется модал, и на этом модале появляются комментарии в виде строк таблицы, так как комментарии увеличиваются, пользователь должен прокрутить все до вниз, и я хочу, чтобы он автоматически прокручивался при монтировании модального компонента. Я использовал материал UI. Я попробовал его по ссылке, а также попробовал другой код, доступный здесь, но он все еще показывает мне эту ошибку.

Answer 1

Ваша проблема в том, что ваш рендер имеет два разных пути, но только один из них устанавливает ссылку на элемент:

if(messages.length === index+1){
    return  <div ref={messagesEnd}>messagesComp(item)</div>    
} else {
    messagesComp(item)
}

Существует даже третий путь, где сообщения пусты, и вы также не получите набор ссылок.

Если ссылка не вызывается, когда вызывается useEffect (что произойдет независимо от того, каким образом вы ее отобразили), ссылка не будет храниться в messagesEnd.current.

Чтобы справиться с этим, вам нужно либо всегда иметь ссылку на элемент в вашем рендере, который, по-видимому, не является желаемым эффектом, либо проверить правильность перед использованием ref:

const scrollToBottom = () => {
    if (messagesEnd && messagesEnd.current) {
        messagesEnd.current.scrollIntoView({ behavior: "smooth" });
    }
};