React Native首次启动时useEffect未执行问题求助

核心问题 #

1. useEffect未设置依赖数组：原代码中useEffect未指定依赖项，会在组件每次渲染时重复执行，导致逻辑触发时机异常，甚至首次挂载时的执行被干扰。
2. UUID存储值错误：生成新ID时，temp变量已存储正确的UUID，但调用AsyncStorage.setItem时却重新生成了一个新的uuid.v4()，导致本地存储的ID与当前应用使用的userId不一致。

修复后的代码 #

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

export const UserIdContext = React.createContext('undef');

export const UserIdProvider = ({ children }) => {
  const [userId, setUserId] = useState('');

  useEffect(() => {
    async function getOrInitUserId() {
      try {
        let temp = await AsyncStorage.getItem('USER_ID');
        if (temp == null) {
          temp = uuid.v4();
          // 存储已生成的temp，而非新的UUID
          await AsyncStorage.setItem('USER_ID', temp);
          console.log('USER_ID Generated: ' + temp);
        } else {
          console.log('USER_ID Found: ' + temp);
        }
        setUserId(temp);
      } catch (error) {
        console.error(error);
      }
    }

    getOrInitUserId();
    // 空依赖数组确保仅在组件挂载时执行一次
  }, []);

  return (
    <UserIdContext.Provider value={userId}>
      {children}
    </UserIdContext.Provider>
  );
};

export const useUserId = () => React.useContext(UserIdContext);

修复说明 #

• 添加useEffect依赖数组[]：确保初始化逻辑仅在Provider组件挂载时执行一次，避免重复触发和时机问题，解决首次启动无日志输出的问题。
• 修正存储的UUID值：将AsyncStorage.setItem('USER_ID', uuid.v4())改为AsyncStorage.setItem('USER_ID', temp)，保证本地存储的ID与应用当前使用的userId一致。这样首次启动会输出USER_ID Generated，重启时读取到存储的ID，输出USER_ID Found，完全符合预期。

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