React中使用useEffect Hook仍触发Uncaught TypeError: Cannot set properties of null错误的解决方案咨询

嘿，我来帮你搞定这个问题！你碰到的Cannot set properties of null错误，本质是执行useEffect的时候，目标DOM元素要么还没完成挂载，要么你的ID写串了——看你代码里用的是address-i，但问题里说的目标元素是address-instructions，先确认两个元素的ID在JSX里都正确存在哦！下面给你几种靠谱的解决思路：

1. 用React的useRef Hook（官方推荐） #

直接操作document.getElementById不是React的最佳实践，useRef能安全地帮你获取DOM元素，还能避免内存泄漏问题。代码示例如下：

import { useEffect, useRef } from 'react';

function YourComponent() {
  // 创建ref绑定到目标元素
  const addressIconRef = useRef(null);
  const addressInstructionsRef = useRef(null);

  useEffect(() => {
    // 定义hover事件处理函数
    const showInstructions = () => {
      if (addressInstructionsRef.current) {
        addressInstructionsRef.current.style.display = 'block';
      }
    };

    const hideInstructions = () => {
      if (addressInstructionsRef.current) {
        addressInstructionsRef.current.style.display = 'none';
      }
    };

    // 确保元素存在再绑定事件
    const iconElement = addressIconRef.current;
    if (iconElement) {
      iconElement.addEventListener('mouseover', showInstructions);
      iconElement.addEventListener('mouseout', hideInstructions);

      // 清理函数：组件卸载时移除事件监听，防止内存泄漏
      return () => {
        iconElement.removeEventListener('mouseover', showInstructions);
        iconElement.removeEventListener('mouseout', hideInstructions);
      };
    }
  }, []); // 空依赖数组确保只在组件挂载/卸载时执行

  return (
    <div>
      {/* 把ref绑定到对应DOM元素 */}
      <div ref={addressIconRef} id="address-i">地址图标</div>
      <div ref={addressInstructionsRef} id="address-instructions" style={{ display: 'none' }}>
        地址填写说明内容
      </div>
    </div>
  );
}

2. 用CSS实现Hover效果（更简洁，无需JS） #

如果两个元素是父子/相邻关系，完全可以用CSS替代JS逻辑，既符合React声明式风格，又避免DOM操作的坑：

/* 默认隐藏说明框 */
#address-instructions {
  display: none;
}

/* 鼠标悬浮在图标上时显示说明框（父子元素场景） */
#address-i:hover #address-instructions {
  display: block;
}

/* 如果是相邻兄弟元素，用这个选择器 */
#address-i:hover + #address-instructions {
  display: block;
}

这种方式连useEffect都不需要写，代码更清爽！

3. 处理条件渲染的情况 #

如果address-i或address-instructions是通过条件渲染显示的（比如{isVisible && <div id="address-i">...</div>}），记得把控制渲染的变量加入useEffect的依赖数组，这样元素挂载后useEffect会重新执行：

useEffect(() => {
  // 你的事件绑定逻辑
}, [isVisible]); // 这里加入控制元素显示的变量

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