React Native AsyncStorage问题：按钮需点击两次才能保存正确值

点击按钮需要两次才生效的核心原因是：React的setState是异步操作。在buttonActions中调用setIsChecked后立刻执行buttonSaveClicked，此时isChecked还是更新前的旧值，导致第一次点击时存储的是旧状态，第二次点击才会同步正确的状态到AsyncStorage。

另外当前代码还缺少两个关键逻辑：

• 按钮未根据isChecked状态设置禁用属性
• 缺少清除禁用状态的按钮

方案1：利用setState的函数式更新传递新值 #

在调用setIsChecked时直接获取新状态值，传递给存储函数，确保存储的是最新状态：

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

export const BtnSave = () => {
  const [isChecked, setIsChecked] = useState(false);

  useEffect(() => { getButtonOption() }, [])

  const getButtonOption = async () => {
    try {
      const jsonValue = await AsyncStorage.getItem('buttonCheck')
      const value = JSON.parse(jsonValue)
      setIsChecked(value ?? false); // 处理初始值为null的情况
    } catch(e) {
      console.log(e)
    }
  }

  const buttonActions = async () => {
    // 直接获取新状态值并传递给存储函数
    setIsChecked(previousValue => {
      const newValue = !previousValue;
      buttonSaveClicked(newValue);
      return newValue;
    });
  };

  const buttonSaveClicked = async (newValue) => {
    await AsyncStorage.setItem('buttonCheck', JSON.stringify(newValue))
  };

  // 清除禁用状态的函数
  const clearButtonState = async () => {
    setIsChecked(false);
    await AsyncStorage.setItem('buttonCheck', JSON.stringify(false));
  };

  return (
    <View style={{ gap: 10, padding: 20 }}>
      <Button 
        title='保存设置' 
        onPress={buttonActions}
        disabled={isChecked} // 根据状态禁用按钮
      />
      <Button 
        title='清除禁用状态' 
        onPress={clearButtonState}
      />
    </View>
  )
}

方案2：用useEffect监听状态变化自动同步存储 #

这种方式更符合React的状态管理逻辑，状态更新后自动触发存储操作，避免手动传递值：

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

export const BtnSave = () => {
  const [isChecked, setIsChecked] = useState(false);

  // 初始化读取存储的状态
  useEffect(() => {
    const initState = async () => {
      try {
        const jsonValue = await AsyncStorage.getItem('buttonCheck')
        setIsChecked(JSON.parse(jsonValue) ?? false);
      } catch(e) {
        console.log(e)
      }
    };
    initState();
  }, [])

  // 监听isChecked变化，自动同步到AsyncStorage
  useEffect(() => {
    const saveState = async () => {
      await AsyncStorage.setItem('buttonCheck', JSON.stringify(isChecked));
    };
    saveState();
  }, [isChecked])

  const buttonActions = () => {
    setIsChecked(prev => !prev);
  };

  const clearButtonState = () => {
    setIsChecked(false);
  };

  return (
    <View style={{ gap: 10, padding: 20 }}>
      <Button 
        title='保存设置' 
        onPress={buttonActions}
        disabled={isChecked}
      />
      <Button 
        title='清除禁用状态' 
        onPress={clearButtonState}
      />
    </View>
  )
}

• 解决异步状态更新问题：通过函数式更新获取最新状态值，或利用useEffect监听状态变化自动存储，确保存储的是最新的状态值
• 添加按钮禁用逻辑：给Button组件添加disabled={isChecked}属性，点击后直接禁用按钮
• 添加清除功能：新增清除按钮，重置状态并同步到AsyncStorage
• 处理初始值：读取存储时判断值是否为null，设置默认值false，避免初始状态异常

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