使用Expo和React Native在应用程序发布之间保留数据

问题描述：

这是我的App.js，其他所有内容都是标准/简单的，因为我可以得到它。使用Expo和React Native在应用程序发布之间保留数据

import React from 'react'; 
import { AsyncStorage, Text, View } from 'react-native'; 

export default class App extends React.Component { 
    render() { 

    console.log("Fetching data") 
    AsyncStorage.getItem('@MySuperStore:key', (value) => { 
     console.log("Fetched data: ", value) 
     if(value == null) { 
     console.log("Writing data!") 
     AsyncStorage.setItem('@MySuperStore:key', 'data',() => { 
      console.log("Wrote data!") 
     }) 
     } 
    }) 

    return(
    <View> 
     <Text>Hello, ReplIt</Text> 
    </View> 
    ); 
    } 
}

取出的value总是null。

我已经尝试过本地和ReplIt。在所有情况下，数据不会跨应用程序加载;我总是看到：

Fetching data 
Fetched data: null 
Writing data! 
Wrote data!

我在做什么错？对于世博会与持久性存储的互动方式，我有一个不正确的假设吗？ AFAIK，AsyncStorage应该保存东西到设备;所以我可以关闭并重新打开该应用程序并保留数据。

是否使用ReplIt？这可能是原因。 – Li357

“我已经尝试过本地和ReplIt” – Narfanator

答

UPD：我只是意识到你的代码和预期一样......或许正是因为在评论中提及replit问题。

避免任何请求和异步调用render方法，因为它可能被调用可能取决于如何道具或状态更改。最好将所有相关代码放入componentDidMount，因为它在documentation中建议使用。安装组件时它只会被调用一次。

不知道为什么你的代码dodnt为你工作，回调允许AsyncStorage，然而等待的作品对我蛮好：

import React from "react"; 
import { AsyncStorage, Text, View } from "react-native"; 

export default class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     storedValue: null 
    }; 
    } 
    async componentDidMount() { 
    let storedValue = await AsyncStorage.getItem("@MySuperStore:key"); 
    console.log("Fetched data: ", storedValue); 
    if (storedValue == null) { 
     console.log("Writing data!"); 
     storedValue = await AsyncStorage.setItem("@MySuperStore:key", "data"); 
    } 
    this.setState({ 
     storedValue 
    }); 
    } 

    render() { 
    const { storedValue } = this.state; 
    return (
     <View> 
     <Text>Hello, ReplIt</Text> 
     <Text>This is Stored Value, '{storedValue}'</Text> 
     </View> 
    ); 
    } 
}

是的，这是做到了。我在Repl.It和本地之间困惑了一下，因为我没有在本地完成一个完整的代码替换，但是这很有效。 – Narfanator

答

给这些尝试。 AsyncStorage是一个基于Javascript Promise的方法。

AsyncStorage.getItem('@MySuperStore:key') 
.then(value => console.log(value))

或

value = await AsyncStorage.getItem('@MySuperStore:key'); 
console.log(value);

使用Expo和React Native在应用程序发布之间保留数据

相关推荐