领域侦听器内的状态未定义（领域和 React Native）答案

【问题标题】：state inside realm listener is undefined (Realm and React Native)领域侦听器内的状态未定义（领域和 React Native）
【发布时间】：2021-10-27 11:38:42
【问题描述】：

我在使用 Realm 和 React Native 时遇到了以下问题。

在我的组件中，我想听听 Realm 的变化，这确实有效。但是在监听器内部，我的状态始终是未定义的——在监听器内部设置状态后，useEffect 钩子也不会触发。看起来侦听器内的所有内容都无法访问我的状态对象。

我需要访问侦听器内部的状态才能正确设置状态。我该怎么做？

edit：状态似乎总是过时的。热重载后，状态是正确的，但仍然总是落后于 1 次编辑。

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

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

  useEffect(() => {
    const tmp: any = settingsRealm.objects(MyRealm.schema.name)[0];
    tmp.addListener(() => {
      console.log(premium, settings); // both return undefined
      if (premium) {
        setSettings(tmp);
      }

      // for demonstration purposes
      setSettings(tmp);
    })
  }, []);

【问题讨论】：

标签： javascript reactjs react-native realm

【解决方案1】：

对于任何有同样问题的人：

添加一个引用状态的useRef，并同时更新两者（！）（状态和引用）将解决问题。现在“premium”的所有实例（在侦听器内）都必须更改为“premiumRef.current”。

https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

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

  const premiumRef = useRef<boolean>(premium);
  const setPremium = (data) => {
    premiumRef.current = data;
    _setPremium(data);
  }


  useEffect(() => {
    const tmp: any = settingsRealm.objects(MyRealm.schema.name)[0];
    tmp.addListener(() => {
      if (premiumRef.current) {
        setSettings(tmp);
      }
    })
  }, []);


  [1]: https://medium.com/geographit/accessing-react-state-in-event-listeners-with-usestate-and-useref-hooks-8cceee73c559

【讨论】：