类型错误：无法读取 React 表中 null 的属性'scrollIntoView'

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>

);
}

我制作了一个应用程序，如果您单击一个按钮，则会弹出一个模态，在该模态上会有表格行形式的注释，随着注释的增加，用户必须向下滚动所有内容，我希望它随着模态组件的安装而自动滚动。我使用了材料用户界面。 我通过 ref 尝试了它，也尝试了此处提供的其他代码，但它仍然向我显示此错误。

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" });
}
};