useRef.current 即使在 useEffect 钩子中也是未定义的

Question

我是 React 和 React-Native 的初学者。我正在尝试为分析设置 Firebase。我正在使用 react-native-redux 和 react-native-redux-persist。也使用反应导航。

来自 App.js 在我的 React Native 应用程序中的代码：

const App = () => {
  const routeNameRef = React.useRef(null);
  const navigationRef = React.useRef(null);

  React.useEffect(() => {
    console.log('hrhr');
    console.log(routeNameRef);
    console.log(navigationRef);
    const state = navigationRef.current.getRootState();

    // Save the initial route name
    routeNameRef.current = getActiveRouteName(state);
  }, []);

  return (
    <Provider store={persistStore.store}>
      <PersistGate loading={null} persistor={persistStore.persistor}>
        <NavigationContainer
          ref={navigationRef}
          onStateChange={state => {
            const previousRouteName = routeNameRef.current;
            const currentRouteName = getActiveRouteName(state);

            if (previousRouteName !== currentRouteName) {
              // The line below uses the @react-native-firebase/analytics tracker
              // Change this line to use another Mobile analytics SDK
              analytics().setCurrentScreen(currentRouteName, currentRouteName);
            }

            // Save the current route name for later comparision
            routeNameRef.current = currentRouteName;
          }}>
           {/***/}
        </NavigationContainer>
      </PersistGate>
    </Provider>
  );
};

日志：

LOG  hrhr
LOG  {"current": undefined}
LOG  {"current": undefined}

版本：

"react": "16.13.1",
"react-native": "0.61.5",

该应用还依赖于 react native redux 和 firebase。

更新

useEffect 有时会在应用程序重新加载后循环调用，即使我在 useEffect() 中传递了一个空数组。

更新

删除 PersistGate JSX 标签后，它工作正常。请告诉我如何解决这个问题。

Answer 1

当我在一个单独的组件中提取完整的 <NavigationContainer> 并在其中使用 useEffect 时，这是有效的。仍然不知道根本原因是什么。

Answer 2

它只是在加载时未定义。你想要的是使用 useCallback 因为你在加载后设置 ref。查看 https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

useRef.current 即使在 useEffect 钩子中也是未定义的

useRef.current is undefined even in useEffect hook

reactjs

react-native

redux

react-redux

redux-persist