问题

Question

获取错误，因为使用滚动代码时“无法读取null的属性scrollintoview”

2021-03-07

1049

javascript reactjs

以下代码经常出现上述错误

const [consumerMessages, setConsumerMesssages] = useState([])

 const messagesEndRef = useRef(null);

 const scrollToBottom = () => {
        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
      };
 
useEffect(() => {
        scrollToBottom()
      }, [consumerMessages]);

以下是 codesandbox 链接： https://codesandbox.io/s/sleepy-nobel-kt87m

为什么会出现此错误以及什么可能是适当的解决方案？

Answer 1

问题

基本上，在初始渲染时，ref 尚未作为当前 ref 值附加到 DOM 节点，因此 messagesEndRef.current 尚未定义。

解决方案

使用 null 检查：

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

或使用可选链接运算符 ( ?. )：

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

获取错误，因为使用滚动代码时“无法读取null的属性scrollintoview”

问题

解决方案

演示