理解错误销毁不是函数

Question

我不明白，我正在尝试通过向 useEffect 添加函数“languageSetUp()”来改进我的 app.js 代码，但我发现自己面临错误：

destroy 不是函数。 （在 'destroy()' 中，'destroy' 是一个实例 对象）

你知道这是什么原因吗？那是什么意思？我不明白问题出在哪里，如果你能帮助我，特别是给我解释一下，我提前谢谢你。感谢您提供任何时间或帮助。

搜索后我认为这是由于 'this.props' 我一开始不知道如何在功能组件中替换它：

if (isConnected === true && this.props && this.props.navigation) { this.props.navigation.navigate("BottomTabNavigator"); } }

export default function App() {

  Text.defaultProps = Text.defaultProps || {};
  Text.defaultProps.allowFontScaling = false; 

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);
  
   async function languageSetUp() {
    let lang = await retrieveAppLang();
    let isConnected = await userSessionActive();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }

    if (isConnected === true) {
      this.props.navigation.navigate("BottomTabNavigator");
    }
  }

  React.useEffect(() => {
    setTimeout(() => setLoading(false), 2000);  
    languageSetUp();
    if (loading) {
    return <Splash />;
  }
  });
 
  return (
    <AppContext.Provider value={state}>
      <NavigationContainer>
        {!user.loggedIn ? (
          <MainStackNavigator />
        ) : (
          <BottomTabNavigator />
        )}
      </NavigationContainer>
    </AppContext.Provider>
  );
}

Answer 1

它来自您的useEffect 函数。它有两个问题：

1. 如果你从useEffect 返回任何东西，它必须是一个函数。您可以在此处阅读有关 useEffect 清理功能的更多信息：Getting error after I put Async function in useEffect

2. useEffect 应该有第二个参数，它是一个依赖数组。官方文档可以为您提供有关如何使用它的更多信息：https://reactjs.org/docs/hooks-effect.html 在您的情况下，看起来您只想在组件挂载时运行一次，因此它可能只是一个空数组（[]）作为第二个参数。

看起来您正在尝试做的是在您处于加载状态时显示Splash。

与其从useEffect 返回，不如从组件中返回。一个（简单的）选项是：

if (loading) {
 return <Splash/>;
}

return (
    <AppContext.Provider value={state}>
    //...

但是，请注意您还有其他逻辑错误。现在，无论如何，您的 loading 状态会在 2 秒后关闭。您可能应该等待 languageSetUp 的返回并根据它进行设置。

可能是这样的：

React.useEffect(() => {
  languageSetUp().then(() => setLoading(false))
  //handle errors?
},[]);