JSX中使用useRef遇MutableRefObject错误，无法调用listRef.current

你的问题核心是在访问ref的DOM属性前没有先检查ref是否存在，代码里先执行了listRef.current.getBoundingClientRect()，这时候如果listRef.current还没挂载或者已卸载，就会抛出undefined错误。

修复步骤： #

• 先判断listRef.current是否存在，再执行后续DOM操作
• 确保ref已经正确绑定到目标DOM元素上（比如在JSX里写ref={listRef}）

修改后的代码： #

const handleClick = (direction) => {
  // 先检查ref是否存在，不存在直接返回
  if (!listRef.current) return;

  let distance = listRef.current.getBoundingClientRect().x - 50;

  if (direction === "left" && slideNumber > 0) {
    setSlideNumber(slideNumber - 1);
    listRef.current.style.transform = `translateX(${230 + distance}px)`;
  } else if (direction === "right" && slideNumber < 5) {
    setSlideNumber(slideNumber + 1);
    listRef.current.style.transform = `translateX(${-230 + distance}px)`;
  }
};

额外注意事项： #

• 如果使用TypeScript，需要给useRef指定类型，避免类型报错：

  const listRef = useRef<HTMLDivElement>(null);
  

• 确认目标DOM元素在组件渲染时已经存在，不会被条件渲染隐藏（比如在{condition && <div ref={listRef}>...</div>}里，当condition为false时ref会是undefined）

内容的提问来源于stack exchange，提问作者Satyan