基于 token 的 React Native 条件渲染，组件状态内部不存储

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

但这只是 returns 没什么（因为它可能是一个承诺）。

我该如何着手解决这类问题？

编辑

我也尝试过获取网页并将其放入状态。问题在于这只是一个 html 页面，因此在 webview 中呈现的页面不是很实用。

Answer 1

React 不允许您等待、延迟或延迟渲染。你必须渲染一些东西，然后你可以在你的 promise 解决时替换它。你应该把你的副作用放在 useEffect 钩子或 componentDidMount 生命周期方法中。

Answer 2

我选择仍将令牌存储在状态中，但在 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>
  );
}

基于 token 的 React Native 条件渲染，组件状态内部不存储

React Native conditional rendering based on token without storage inside component state

reactjs

react-native

react-native-keychain