AsyncStorage导航日志丢失求助：useEffect同步冲突如何解决？

问题根源 #

你遇到的日志丢失确实是并发读写的竞态条件：多个操作同时读取旧的日志数据，各自修改后再写入，后写入的会覆盖前一个的修改，导致中间日志丢失。另外，useEffect不是不能用async/await，而是不能直接把useEffect的回调写成async函数（因为会返回Promise，而React期望回调返回清理函数或undefined），但可以在内部定义async函数并调用。

解决方案 #

方案1：串行化日志写入操作（最可靠解决竞态） #

创建一个全局的Promise队列，让所有日志写入操作按顺序执行，确保前一个写入完成后再执行下一个，彻底避免并发冲突。

// 全局维护一个串行执行的Promise队列，初始为已完成状态
let logWriteQueue = Promise.resolve();

// 封装日志写入函数
const saveNavigationLog = async (logMsg) => {
  // 将当前写入操作加入队列，等待前一个操作完成
  logWriteQueue = logWriteQueue.then(async () => {
    try {
      // 读取最新日志
      const storedLog = await AsyncStorage.getItem('log');
      const logArray = storedLog ? JSON.parse(storedLog) : [];
      // 添加新日志
      logArray.push(`${logMsg}\n`);
      // 写入存储
      await AsyncStorage.setItem('log', JSON.stringify(logArray));
    } catch (error) {
      console.error('日志保存失败:', error);
    }
  });
};

// 在组件中使用
useEffect(() => {
  // 页面聚焦时触发日志记录
  if (useIsFocused()) {
    // 调用封装好的写入函数
    saveNavigationLog(props.msg);
  }
}, [useIsFocused(), props.msg]);

方案2：内存缓存日志状态（简化逻辑） #

用React状态维护内存中的日志数组，每次添加日志先更新内存状态，再同步到AsyncStorage。内存状态始终是最新的，避免读取旧数据的问题。

const [navigationLogs, setNavigationLogs] = useState([]);

// 初始化加载本地存储的日志
useEffect(() => {
  const loadStoredLogs = async () => {
    const storedLog = await AsyncStorage.getItem('log');
    if (storedLog) {
      setNavigationLogs(JSON.parse(storedLog));
    }
  };
  loadStoredLogs();
}, []);

// 页面聚焦时添加日志到内存状态
useEffect(() => {
  if (useIsFocused()) {
    setNavigationLogs(prevLogs => [...prevLogs, `${props.msg}\n`]);
  }
}, [useIsFocused(), props.msg]);

// 监听内存日志变化，同步到本地存储
useEffect(() => {
  const syncToStorage = async () => {
    await AsyncStorage.setItem('log', JSON.stringify(navigationLogs));
  };
  syncToStorage();
}, [navigationLogs]);

额外建议 #

• 始终添加异常捕获，避免AsyncStorage操作失败导致程序崩溃
• 如果日志量较大，可以限制最大条数（比如保留最近100条），避免占用过多存储
• 跨组件记录日志时，建议把日志逻辑封装成自定义Hook或全局工具，保持代码复用性

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