如何在App.tsx中使用AsyncStorage，以便以正确的顺序触发命令

编程问答 2022-08-13

问题描述

我在AsyncStorage上苦苦挣扎了很长时间，并找到了在项目中使用它的方法。我的问题是我无法在正确的时间触发它。在以下示例中，我需要在执行以下命令（此处为演示，我使用console.log(2)）之前填充令牌。

此外，这是App.tsx，因此我无法使用useState或componentDidMount来解决我的问题。

示例：

console.log(1)
const token = AsyncStorage.getItem(AUTH_TOKEN).then((token) => {
  console.log(token)
  if (token != null) {
    return token
  }
});
console.log(2)

所以我想拥有的是：

1
ojh324rfoj32n4t243to2n
2

但是我得到了

1
2
ojh324rfoj32n4t243to2n

如何控制async await，以便安全使用token变量？

我也不不喜欢使用callback函数，因为那时我需要将所有内容都放在其中，我认为这不会有问题。

未来用途（伪代码）：

const token = AsyncStorage.getItem(AUTH_TOKEN).then((token) => {
  console.log(token)
  if (token != null) {
    return token
  }
});
use(token)...

解决方法

如何控制异步等待，以便可以安全地使用令牌变量？

您可以将async函数与await一起使用

async function example() {
  console.log(1)
  const token = await AsyncStorage.getItem(AUTH_TOKEN)
  console.log(token)
  console.log(2)
}

await将在此处工作，因为getItem返回Promise对象。您可以等待其他.then的替代或回调函数的承诺。

,

实际上，我通过将App从function重写为React component来解决了这个问题。

所以我开始的是function App。在这里，我们没有机会使用componentDidMount：

export default function App() {

因此，我将function转换为Component，如下所示：

export default class App extends React.Component {

然后根据需要在组件中添加了render() {。之后，我将所有内容直接移到了render行上方的function App下面。

现在，我添加了state和componentDidMount。这对于预先检查应用程序是否已经加载非常重要。它还可以防止App以后随时重新加载。这样就可以正常工作，直到用户可能重新加载浏览器。不管怎么说，这是可行的，因为现在仅将authtoken加载到状态中，并且render完成了所需变量的初始化。

以下是更改后的重要代码：

export default class App extends React.Component { 
  state = {
    authtoken: null,isLoading: true,}

  componentDidMount() {
    AsyncStorage.getItem(AUTH_TOKEN).then((currentToken) => {
      if (currentToken != null) {
        this.setState({ 
          authtoken: currentToken,isLoading: false,})
      } else {
        this.setState({ 
          authtoken: '',})
      }
    });
  }

  render() {
    let { authtoken,isLoading } = this.state
    if (isLoading == null) {
      return <View><Text>Loading...</Text></View>
    } else {
      ...
asyncstorageasyncstoragereact-nativereact-nativereactjsreactjsreactjsreactjs