React Native中Realm监听器内state为undefined或过时该如何解决？

问题根本原因 #

1. 闭包快照问题：绑定Realm监听器的useEffect依赖项为空数组，仅会在组件首次渲染时执行一次，监听器函数捕获的永远是首次渲染时的premium、settings状态快照，后续状态更新后监听器内部无法读取最新值，就会出现旧数据/undefined的问题。
2. Realm对象引用不变问题：Realm查询返回的是响应式代理对象，即使内部数据变更，对象本身的引用不会变化，直接把这个对象传给setSettings的话，React会认为状态没有变更，因此不会触发后续依赖settings的useEffect执行。

解决方案 #

方案1：用useRef存储最新状态（推荐，无需频繁解绑重绑监听器） #

用useRef同步保存state的最新值，监听器内直接读取ref的current属性即可拿到最新值，同时将Realm对象转为普通JS对象后再更新状态：

import { useRef } from 'react';

const [premium, setPremium] = useState<boolean>(true);
const [settings, setSettings] = useState<any>({loggedIn: true, userName: 'XYZ'});
// 用ref同步最新的state值
const premiumRef = useRef(premium);
const settingsRef = useRef(settings);

// 状态变化时同步更新ref
useEffect(() => {
  premiumRef.current = premium;
  settingsRef.current = settings;
}, [premium, settings]);

useEffect(() => {
  console.log('updated settings'); // 现在可正常触发
}, [settings]);

useEffect(() => {
  const tmp: any = settingsRealm.objects(MyRealm.schema.name)[0];
  const realmListener = () => {
    // 从ref读取最新值，无闭包问题
    console.log(premiumRef.current, settingsRef.current);
    if (premiumRef.current) {
      // 把Realm对象转成普通JS对象，打破引用不变的问题
      setSettings({...tmp});
      // 嵌套对象可使用深拷贝：
      // setSettings(JSON.parse(JSON.stringify(tmp)))
    }
    setSettings({...tmp});
  }
  tmp.addListener(realmListener);
  // 组件卸载时清理监听器，避免内存泄漏
  return () => {
    tmp.removeListener(realmListener);
  }
}, []);

方案2：给useEffect添加依赖项，更新时重绑监听器 #

把用到的premium、settings加到useEffect依赖数组中，每次依赖变化时销毁旧监听器、绑定新的监听器，新监听器即可获取到最新的状态：

const [premium, setPremium] = useState<boolean>(true);
const [settings, setSettings] = useState<any>({loggedIn: true, userName: 'XYZ'});

useEffect(() => {
  console.log('updated settings');
}, [settings]);

useEffect(() => {
  const tmp: any = settingsRealm.objects(MyRealm.schema.name)[0];
  const realmListener = () => {
    console.log(premium, settings);
    if (premium) {
      setSettings({...tmp});
    }
    setSettings({...tmp});
  }
  tmp.addListener(realmListener);
  return () => {
    tmp.removeListener(realmListener);
  }
// 把用到的state加到依赖数组
}, [premium, settings]);

注意事项 #

• 两种方案都必须在useEffect的清理函数中移除Realm监听器，避免内存泄漏和重复触发问题。
• 如果Realm对象是嵌套结构，浅拷贝{...tmp}无法触发更新时，可以用JSON.parse(JSON.stringify(tmp))或者structuredClone(tmp)做深拷贝，确保状态引用变化被React检测到。

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