Реагировать на собственный условный рендеринг на основе токена без хранения внутри состояния компонента

Question

В настоящее время я использую react-native-keychain для безопасного хранения токенов доступа. В большинстве случаев это работает хорошо, но у меня возникают проблемы при попытке условного рендеринга компонента на основе того, доступен токен или нет.

В настоящее время мой код выглядит примерно так:

function Questionnaire() {
  const [token, setToken] = useState(null);

  Keychain.getGenericPassword().then(credentials => {
    const token = credentials.password.replace('Bearer ', '');
    setToken(token);
  });

  if (token != null) {
    return (
      <WebView
        source={{
          uri: `url?token=${token}`,
        }}
        ...
      />
    );
  } else {
    return <Text>Loading...</Text>;
  }
}

Условный рендеринг работает здесь, но я просто храню токен в состоянии, которого я хочу избежать.

Я пытался сделать что-то вроде этого:

function Questionnaire() {
  const [token, setToken] = useState(null);

  return (
    <View>
      {(() => {
        Keychain.getGenericPassword().then(credentials => {
          const token = credentials.password.replace('Bearer ', '');
          return
            (
               <View>
                  ... // do something with the token
               </View>
            );
        });
      })()}
    </View>
  );
}

Но это просто ничего не возвращает (вероятно, из-за того, что это обещание).

Как я мог go решить эту проблему?

РЕДАКТИРОВАТЬ

У меня есть также попытался получить веб-страницу и поместить ее в состояние. Проблема в том, что это всего лишь страница html, поэтому страница, отображаемая в веб-представлении, не очень функциональна.

Answer 1

Я решил сохранить токен в состоянии, но сбросить токен в анонимной функции очистки в хуке useEffect.

function Questionnaire() {
  const [token, setToken] = useState(null);
  const navigation = useNavigation();

  useEffect(() => {
    Keychain.getGenericPassword().then(credentials => {
      const token = credentials.password.replace('Bearer ', '');
      setToken(token);
    });
    return () => {
      setToken(null); // reset the token stored in the questionnaire state (token can still be retrieved from keychain)
    };
  }, []);

  return token ? (
    <WebView
      source={{
        uri: url?token=${token},
      }}
      ...
    />
  ) : (
    <Text>Loading...</Text>
  );
}

Answer 2

React не позволяет вам ждать, откладывать или задерживать рендеринг. Вы должны что-то отрендерить, и затем вы можете заменить это позже, когда ваше обещание разрешится. И вы должны поместить свои побочные эффекты в useEffect hook или в componentDidMount метод жизненного цикла.