javascript - Understand error destroy is not a function

Question

I don't understand, I'm trying to improve my app.js code by adding a function 'languageSetUp()' to useEffect and I find myself facing the error:

destroy is not a function. (In 'destroy()', 'destroy' is an instance of Object)

Do you know what it is due to? And what does that mean? I do not understand where the problem is, if you can help me and especially explain to me, I thank you in advance. Thanks for any time or help offered.

After search I think it's due to 'this.props' I don't know how to replace it in a functionnal component at first I wanted to do :

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>
  );
}

question from:https://stackoverflow.com/questions/66048830/understand-error-destroy-is-not-a-function

Answer 1

It's coming from your useEffect function. There are two problems with it:

1. If you return anything from useEffect, it needs to be a function. You can read more about the useEffect cleanup function here: Getting error after I put Async function in useEffect

2. useEffect should have a second argument, which is a dependency array. The official documentation can give you some more information about how to use it: https://reactjs.org/docs/hooks-effect.html In your case, it looks like you want to run it just once when the component mounts, so it may just be an empty array ([]) as the second parameter.

It looks like what you're trying to do is show a Splash in the event that you're in a loading state.

Instead of returning that from useEffect, you should probably return it from your component. One (simplistic) option would be:

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

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

However, be aware that you have other logic errors. Right now, your loading state gets turned off after 2 seconds no matter what. You should probably wait for the return of languageSetUp and set it based on that.

Maybe something like:

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