重新加载时不显示异步存储

Question

我对 React Native 非常陌生。我从来没有在论坛上发过帖子，如果格式不正确请见谅。请多多包涵。当我使用异步存储一个值时，我写入控制台，所以我知道它正在存储该值，然后我读回该值并且我知道当我从控制台读取时它就在那里但它不会将我的单选按钮设置为使用异步存储的值。这 4 行的第一行不起作用，即使我知道数据已设置，但如果我单独测试它们，3 条注释掉的行每行都可以正常工作，但这是我想要工作的第一行：

  const [checked, setChecked] = useState(getData());
 // const [checked, setChecked] = useState('first');
  //const [checked, setChecked] = useState('second');  
  //const [checked, setChecked] = useState(params.startvalue);

完整代码如下：

import React, { useState , useEffect} from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import Constants from 'expo-constants';
import AsyncStorage from '@react-native-async-storage/async-storage';

// or any pure javascript modules available in npm
import { RadioButton } from 'react-native-paper';


const storeData = async (value) => {
  try {
    console.log("in storeData value is-->" + value.toString());
    await AsyncStorage.setItem('@storage_Key', value.toString())
  } catch (e) {
    console.log("didntwork in StoreData");
  }
}

const getData = async () => {
  try {
    const value = await AsyncStorage.getItem('@storage_Key');
    console.log("value in getData is:", value.toString());
    return value != null ? value.toString() : null;
  } catch (e) {
    console.log("error in getData", { e });
  }
}

const MyRadioButton = params => {
  
  const [checked, setChecked] = useState(getData());
 // const [checked, setChecked] = useState('first');
  //const [checked, setChecked] = useState('second');  
  //const [checked, setChecked] = useState(params.startvalue);  
  
   return (
    <View>
      <Text>{params.startvalue}</Text>
      <Text>{params.message1}
        <RadioButton
          value="first"
          status={checked == 'first' ? 'checked' : 'unchecked'}
          onPress={() => {
            setChecked('first');
            params.setxDisabled(true);
            storeData('first');
          }
          }
        /></Text>
      <Text>{params.message2}
        <RadioButton
          value="second"
          status={checked == 'second' ? 'checked' : 'unchecked'}
          onPress={() => {
            setChecked('second');
            params.setxDisabled(false);
            storeData('second');
          }
          }
        /></Text>
    </View>
  );
};


export default function App() {
  const [xdisabled, setxDisabled] = useState(true);
  return (
    <View style={styles.container}>
        <Text style={styles.auto} >Welcome </Text>
        <Text style={styles.auto} >Blah Blahhhh</Text>
        <MyRadioButton message1="I do NOT agree to the terms" message2="I agree to the terms" setxDisabled={setxDisabled} startvalue="first" />
        <Button title="continue" disabled={xdisabled} onPress={() => navigation.navigate('Home')} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Answer 1

好的，如果我理解正确的话，你想从 AsyncStorage 加载当前状态。在加载页面时，您实际上永远不会从 AsyncStorage 获取值，因为它是一个异步函数。您需要等待 return 值。

我建议使用 useEffect() 来完成此任务以模拟组件安装。您应该从 react.

导入它

尝试这样的事情：

const [checked, setChecked] = useState('default value');

useEffect(() => {
   const asyncWrap = async () => {
      const value = await getData();
      setChecked(value);
   }
   asyncWrap() // you can't make async calls directly in useEffect
}, []); // <-- empty [] is very important!

您现在可以照常使用状态了。

重新加载时不显示异步存储

Async storage doesnt display when i reload

react-native

asyncstorage