从 AsyncStorage 检索数据失败

Question

我是 react-native 的初学者。我试图检索从 screen1.js 存储在 Screen2.js 中的数据，但我失败了。

我已经为两个 .js 从 react-native 导入 Asyncstorage

这是我如何存储来自 screenone.js 的变量：

class screenone extends Component {
  state = {
      oldpin: '000000',
      newpin: '',
      secpin: '',
     };

  onPressButton = () => {
      if (this.state.newpin == this.state.secpin) {
        this.setState(
            { oldpin: this.state.newpin },
             async() => await this.storeData());
      }
       else {
        ToastAndroid.show("Password Unmatched", ToastAndroid.SHORT);
      }
    }

   storeData = async () =>{
        const {oldpin} = this.state;
        let  pin : oldpin;
        try{
            await AsyncStorage.setItem('mypin',pin);
            ToastAndroid.show("Password Changed", ToastAndroid.SHORT);
        }
        catch (err){
            console.warn(err)
        }}
....

这就是我尝试在 screentwo.js 中检索数据的方式：

class screentwo extends Component {
  constructor(props) {
super(props);
this.onComplete = this.onComplete.bind(this);
this.state = {
  pin: ''
};
}

retrieveData = async (mypin) => {
  try {
    let value = await AsyncStorage.getItem(mypin);
    if (value !== null) {
      console.log(value);
      this.setState({
      pin: value})
    }
   } catch (error) {
      console.warn(err)
   }
}

onComplete(inputtedPin, clear) {
  retrieveData();
  if (inputtedPin !== this.state.pin) {
    ToastAndroid.show("Incorrect Pin", ToastAndroid.SHORT);
    clear();
  } else {
    ToastAndroid.show("Pin is correct", ToastAndroid.SHORT);
    clear();
    this.props.navigation.navigate("Dashboard");
  }}
  ....

错误：

Reference Error: ReferenceError:Can't find variable:retrieveData

我存储和检索数据的方式是否正确？有什么建议吗？

谢谢。

Answer 1

仅替换

retrieveData();

至

this.retrieveData();

Answer 2

当您从调用方方法调用异步方法时，该方法也成为异步 Try 前缀 async onComplete () { await this.retrieveData() }

Answer 3

我发现您的代码存在一些问题。

首先是retrieveData()函数。它是异步的，应该用 await 调用你也会收到错误：Reference Error: ReferenceError:Can't find variable:retrieveData 因为你没有使用 this

所以理想情况下你应该称它为 await this.retrieveData();

此功能还有一些问题。您使用参数 mypin 但在调用函数时似乎没有将任何参数传递给该函数。解决这个问题你应该像这样调用 retreiveData():

await this.retrieveData('mypin');

或者您可以完全删除传递参数，我将在下面的重构中展示如何做。

最后你每次检查 inputtedPin 时调用 retreiveData 这不是那么有效，它是 asynchronous 所以它可能需要一些时间，其次它也需要时间setState函数完成，这意味着你去检查inputtedPin时状态可能没有及时更新，意味着你正在检查inputtedPin错误值。

代码重构

这就是我重构您的组件的方式。

重构 retrieveData 使其不再需要参数并且密钥在 .getItem
在 componentDidMount 从 AsyncStorage 获取 pin 的值并将其保存到状态。
从 onComplete

retrieveData

这里是重构

retrieveData = async () => { // parameter have been removed
  try {
    let value = await AsyncStorage.getItem('mypin'); // notice I am now passing the key as a string not as a parameter
    if (value !== null) {
      console.log(value);
      this.setState({ pin: value })
    }
   } catch (error) {
      console.warn(err)
   }
}

// here we call the refactored retrievedData which will set the state. 
async componentDidMount () {
  await this.retrieveData();
}

onComplete(inputtedPin, clear) {
  // we remove the call to retrieveData as we have already gotten the pin in the componentDidMount
  if (inputtedPin !== this.state.pin) {
    ToastAndroid.show("Incorrect Pin", ToastAndroid.SHORT);
    clear();
  } else {
    ToastAndroid.show("Pin is correct", ToastAndroid.SHORT);
    clear();
    this.props.navigation.navigate("Dashboard");
  }
}

从 AsyncStorage 检索数据失败

Failed in retrieve data from AsyncStorage

react-native

asyncstorage

代码重构