javascript - 使用向下滚动代码时出现 'Cannot read property scrollIntoView of null' 错误

Question

上面的错误经常出现在下面的代码中

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

 const messagesEndRef = useRef(null);

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

以下是代码框链接: https://codesandbox.io/s/sleepy-nobel-kt87m
为什么会发生此错误，什么可能是适当的解决方案？

Answer 1

问题
基本上在初始渲染时，ref 没有作为当前 ref 值附加到 DOM 节点，所以 messagesEndRef.current尚未定义。
解决方案
使用空检查:

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

或使用 Optional Chaining Operator ( ?.):

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

演示