React中EventListener异步更新State但组件不重新渲染的问题

React的状态更新依赖引用变化：只有当你调用SetState传入的新值和旧值在浅比较下不同时，React才会触发组件重渲染。你直接把state对象传给外部库后，库仅修改了对象内部的counter属性，但state对象的引用没有改变，React检测不到状态变化，因此不会触发重渲染。

解决方案（无需修改外部库） #

方案1：传递state副本给外部库，修改后更新state #

给外部库传一个state的浅拷贝，等库修改完副本后，通过SetState传入新对象触发重渲染：

const [state, SetState] = useState({ counter: 0 });

useEffect(() => {
  // 创建state浅拷贝，避免直接修改原state
  const stateCopy = { ...state };
  externalLibraryEventListener(stateCopy);
  
  // 假设外部库异步操作在2秒后完成，实际可根据库的回调/事件调整时机
  setTimeout(() => {
    SetState(stateCopy); // 传入新引用，触发React重渲染
  }, 2000);
}, [state]);

方案2：监听外部库触发的事件，手动更新state #

如果外部库通过window.addEventListener绑定了特定事件（比如自定义事件），你可以自行监听该事件，在事件触发时更新state：

const [state, SetState] = useState({ counter: 0 });

useEffect(() => {
  externalLibraryEventListener(state);

  // 监听外部库触发的自定义事件（假设事件名为'libraryDataUpdated'）
  const handleUpdate = () => {
    // 通过函数式更新获取最新state，创建新引用触发重渲染
    SetState(prev => ({ ...prev, counter: prev.counter + 1 }));
  };

  window.addEventListener('libraryDataUpdated', handleUpdate);

  // 组件卸载时清理监听
  return () => window.removeEventListener('libraryDataUpdated', handleUpdate);
}, [state]);

方案3：用useRef保存对象，定时检查变化（兜底方案） #

如果外部库没有暴露回调或事件，可通过useRef保存对象，定时检查属性变化，一旦变化就更新state：

const [state, SetState] = useState({ counter: 0 });
const stateRef = useRef({ ...state });

useEffect(() => {
  externalLibraryEventListener(stateRef.current);

  // 定时检查counter是否变化，间隔可根据需求调整
  const checkInterval = setInterval(() => {
    if (stateRef.current.counter !== state.counter) {
      SetState({ ...stateRef.current });
    }
  }, 100);

  return () => clearInterval(checkInterval);
}, [state]);

关键注意点 #

• 永远不要直接修改React state对象的属性，必须通过SetState更新，且要保证传入新的对象/数组引用（浅拷贝即可）。
• 优先使用方案1或2，轮询（方案3）是兜底手段，频繁轮询可能影响性能。

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