React Native待办事项完成状态无法在Storage中持久化

核心问题1：组件初始化未读取已保存状态 #

你的checkBoxState初始化时硬编码为false，没有从传入的todo数据中读取已保存的status值，导致每次刷新后复选框都会回到初始未勾选状态。

修复代码：

// 从props的todo中获取初始状态，而非固定为false
const [checkBoxState, setCheckBoxState] = React.useState(props.todo.status);

核心问题2：状态更新异步导致传递旧值 #

setCheckBoxState是异步操作，在toggleComplete中调用setCheckBoxState后立刻执行handleEdit，此时checkBoxState仍是更新前的旧值，导致传递给editHandler的状态不正确，最终保存的是旧状态。

修复方案二选一：

方案1：函数式更新并直接传递新状态

const toggleComplete = () => {
  setCheckBoxState(prevState => {
    const newStatus = !prevState;
    // 直接使用新状态调用handleEdit
    handleEdit(newStatus);
    return newStatus;
  });
};

// 修改handleEdit，接收新状态参数
const handleEdit = (newStatus) => {
  props.editHandler(props.todoKey, text, newStatus);
  console.log(text2, newStatus);
};

方案2：用useEffect监听状态变化后执行保存

const toggleComplete = () => {
  setCheckBoxState(!checkBoxState);
};

// 当checkBoxState或text变化时，自动调用handleEdit
React.useEffect(() => {
  handleEdit();
}, [checkBoxState, text]);

// 原handleEdit保持不变
const handleEdit = () => {
  props.editHandler(props.todoKey, text, checkBoxState);
  console.log(text2, checkBoxState);
};

补充问题：确保状态更新后同步保存到本地 #

检查是否在todos状态更新后调用了saveTodoToUserDevice，如果没有，添加自动保存监听：

React.useEffect(() => {
  // 每当todos变化时，保存到AsyncStorage
  saveTodoToUserDevice(todos);
}, [todos]);

修改后，复选框状态会正确初始化、更新时传递最新值并同步保存到本地，刷新后即可保留状态。

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