0

我在 expo react 本机应用程序中有一个功能组件，如下面的代码所示。我遇到的麻烦是render partJSX 出现的 ie 在里面的代码之前执行useEffect。

我想在 useEffect 部分之后执行渲染部分，这样屏幕就不会因为 UnAuthenticatedNavigator 先显示而闪烁，然后在 useEffect 执行 AuthenticatedNavigator 显示的其他组件时再过一秒左右。

问题：如何确保在下面的 App 组件中render part的部分之后执行？useEffect

应用程序.js

  const App = () => {
  
  const [user, setUser] = useState();//user is user related data including userToken, companyId, email, fullName
  
  const getUserData = async () => {
    try {
      const userData = await AsyncStorage.getItem('@userData');

      if (userData !== null) {
        setUser(JSON.parse(userData));
      }

    } catch (e) {
      alert("Sorry! An unexpected error has occurred while reading user data.");
    }
  };

  const setUserData = async (userData) => {
    try {

       if (userData) {
        const jsonValue = JSON.stringify(userData);
        await AsyncStorage.setItem("@userData", jsonValue);
        setUser(value);//change state so re-rendering happens
      } 

    } catch (e) {
      alert("Sorry! An unexpected error has occurred while saving user data.");
    }
  }

  useEffect(() => {
    getUserData();//this executes after the render part. I would like it to execute before the render part
  }, []);


  //render part as below. user is still undefined initially since useEffect part executes after this render part.
  return (
    (user ? <AuthenticatedNavigator /> : <UnAuthenticatedNavigator />)
  );
};
4

1 回答 1

2

屏幕将至少呈现一次，因此您可以使用此模式使用 ActivityIndi​​cator 显示加载，直到加载用户。

const App = () => {
  const [user, setUser] = useState(); //user is user related data including userToken, companyId, email, fullName
  const [loading, setLoading] = useState(true);

  const getUserData = async () => {
    try {
      const userData = await AsyncStorage.getItem('@userData');

      if (userData !== null) {
        setUser(JSON.parse(userData));
      }
      setLoading(false);
    } catch (e) {
      alert('Sorry! An unexpected error has occurred while reading user data.');
    }
  };

  const setUserData = async (userData) => {
    try {
      if (userData) {
        const jsonValue = JSON.stringify(userData);
        await AsyncStorage.setItem('@userData', jsonValue);
        setUser(value); //change state so re-rendering happens
      }
    } catch (e) {
      alert('Sorry! An unexpected error has occurred while saving user data.');
    }
  };

  useEffect(() => {
    getUserData(); //this executes after the render part. I would like it to execute before the render part
  }, []);

  if (loading) return <ActivityIndicator />;

  //render part as below. user is still undefined initially since useEffect part executes after this render part.
  return user ? <AuthenticatedNavigator /> : <UnAuthenticatedNavigator />;
};
于 2020-10-11T18:30:38.007 回答