React Native async-storage存取数据异常的useEffect修改咨询

当前代码中两个useEffect的执行时序冲突是数据存读失败的核心原因：

• 组件首次挂载时，tasks初始值为空数组，监听tasks变化的保存逻辑会先于异步读取本地存储的逻辑执行，直接将空数组写入AsyncStorage，覆盖此前存储的所有历史任务数据
• 读取本地存储的逻辑未做空值兜底，应用首次启动本地无存储数据时，AsyncStorage.getItem会返回null，直接执行JSON.parse存在异常风险
• 保存逻辑未跳过首次渲染的初始空值写入，是触发数据覆盖的直接诱因。

新增加载标记位跳过首次空值写入，同时给存读逻辑增加错误捕获和空值兜底，修改后的useEffect相关代码如下：

// 新增标记位，标识是否完成初始本地数据读取
const [isDataLoaded, setIsDataLoaded] = useState(false);

// 组件挂载时仅执行一次：读取本地存储的任务数据
useEffect(() => {
  const fetchTasks = async () =>{
    try {
      const saved = await AsyncStorage.getItem('TASKS');
      // 空值兜底：无历史数据时默认使用空数组
      const parsedTasks = saved ? JSON.parse(saved) : [];
      setTasks(parsedTasks);
      // 标记初始数据加载完成，允许后续触发自动保存
      setIsDataLoaded(true);
    } catch (err) {
      console.error('读取任务失败:', err);
      // 读取异常时也标记加载完成，避免阻塞后续操作
      setIsDataLoaded(true);
    }
  }
  fetchTasks();
}, []);

// 监听tasks变化自动保存，仅在初始数据加载完成后生效
useEffect(() => {
  // 初始数据未加载完成时直接返回，不执行保存，避免空数组覆盖历史数据
  if (!isDataLoaded) return;
  const saveTasks = async () => {
    try {
      await AsyncStorage.setItem('TASKS', JSON.stringify(tasks));
    } catch (err) {
      console.error('保存任务失败:', err);
    }
  }
  saveTasks();
}, [tasks, isDataLoaded]);

• 新增isDataLoaded状态开关，只有本地初始数据读取完成后，才允许自动保存逻辑执行，从根源解决首次挂载时空数组覆盖历史数据的问题
• 为AsyncStorage的读写操作增加try/catch捕获，避免存储读写异常导致应用崩溃
• 读取数据时增加空值判断，本地无历史数据时直接使用空数组作为初始值，避免解析异常
• 保存逻辑的依赖数组补充isDataLoaded，保证状态联动符合预期

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