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

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 获取值，因为它是一个异步函数。您需要等待返回值。

我建议在此任务中使用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!

您现在可以像往常一样使用该状态。