Блог

У меня есть собственное приложение react, и я реализую поток аутентификации, используя Context API природу приложения, когда пользователь открывает его, он не запрашивает вход или регистрацию, и пользователь может просматривать экраны приложений, однако, когда пользователь добавляет товары в корзину и собирается оформить заказ, ему будет предложено войти/зарегистрироваться, чтобы продолжить.

давайте предположим, что это экраны

 Home-gt; shop -gt; cart   

поэтому, когда пользователю в корзине будет предложено войти в систему, после входа в систему значение пользователя в поставщике контекста будет обновлено, и они продолжат с того же экрана, на который вошел пользователь (который в данном случае является экраном корзины). Однако, когда значение поставщика обновлено, все экраны снова отображаются и перенаправляются на начальный маршрут, который является начальным экраном. как я могу справиться с этим сценарием, который не будет повторно отображать весь экран снова.

В моем приложении я передаю навигацию, застрявшую в качестве дочерней, поставщику контекста следующим образом:

 lt;AuthProvidergt;  lt;Routes /gt; lt;/AuthProvidergt;  

а вот код поставщика контекста: authProvider.js:

 export const AuthContext = createContext();  export const AuthProvider = ({ children }) =gt; {    const [user, setUser] = useState(null);  const value = useMemo(  () =gt; ({ user, setUser }),  [user]);    return (  lt;AuthContext.Provider   value={{  value,  login: async (email, password) =gt; {  //here i am validating the login details and update user state   // if login successful   setUser(/*some data related to user */)  //when i set user data here it re-render all screens again  // if login failed   setUser(null)  }  }}gt;   {children}  lt;/AuthContext.Provider gt;  

и следующие Маршруты.js, который я передаю как дочерний код в вышеприведенный код:

 const Routes = () =gt; {   const { value } = useContext(AuthContext);    // validate token with backend useEffect(() =gt; {  setTimeout(async () =gt; {  const Token = await AsyncStorage.getItem('Token');  if (Token === null) {  value.setUser(null)  } else {  await axios.get(URL, {  headers: { 'x-auth-token': Token },  }).then(async (res) =gt; {  const {data} = res;  value.setUser(data)   }).catch(async (err) =gt; {  if (err.response) {  await AsyncStorage.removeItem('Token');  value.setUser(null)  }  });  }  }, 1000)   }, []);     return (  lt;gt;  lt;NavigationContainergt;  //this is the stuck where i have the three screen mentioned above (home, shop, cart)  lt;AppStuckScreen /gt;  lt;/NavigationContainergt;  lt;/gt;    ) }  export default Routes;  

На экране корзины я проверяю пользовательские значения, сохраненные в поставщике контекста, если они равны нулю, затем открываю форму входа в систему.

Я надеюсь, что кто-нибудь может помочь мне в том, как справиться с этой ситуацией, когда не нужно повторно отображать все компоненты снова при обновлении пользовательского значения в поставщике контекста.

Почему бы вам не сохранить текущий экран в контексте? Поэтому после успешного входа в систему вы просто переходите на этот экран.