React Native重载页面后AsyncStorage存储值无法初始化单选框选中状态

问题根源 #

getData是async异步函数，调用后返回的是Promise实例，不是你实际存储的字符串值。你直接将getData()传给useState作为初始值时，checked实际拿到的是Promise对象，和'first'/'second'做等值判断永远为假，因此单选框无法匹配到已存储的选中状态。

解决方法 #

1. 给checked设置兜底初始值（比如用你传入的params.startvalue）
2. 借助useEffect在组件挂载完成后，异步读取AsyncStorage里存储的值，拿到后再更新checked状态，同时同步关联的xDisabled状态
3. 修复getData中的隐藏bug：如果存储的值为null时直接调用toString()会抛出异常，需要先做非空判断

核心修改代码 #

1. 调整getData逻辑

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

2. 调整MyRadioButton组件的状态初始化逻辑

const MyRadioButton = params => {
  // 先用传入的startvalue作为兜底初始值
  const [checked, setChecked] = useState(params.startvalue);
  
  // 组件挂载后异步读取存储的值更新状态
  useEffect(() => {
    const initChecked = async () => {
      const savedVal = await getData();
      if (savedVal) {
        setChecked(savedVal);
        // 同步xDisabled状态
        params.setxDisabled(savedVal === 'first');
      }
    }
    initChecked();
  }, []);

  // 渲染逻辑保持原有代码不变即可
  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>
  );
};

内容的提问来源于stack exchange，提问作者Laura