React Native中如何将AsyncStorage邮箱作为Axios请求参数传递

你遇到的首次加载参数不正确的问题，核心原因是异步操作的执行顺序：getUsername是异步函数，从AsyncStorage取数据需要时间，但你在useFocusEffect里同时调用了getUsername和getUsersInfoFromAPI，导致API请求先执行，此时SessionEmail还是初始值'na'，自然传参错误。

下面提供两种简单可行的修复方式：

方案一：获取邮箱后直接调用API #

修改getUsername函数，在成功获取到邮箱并更新状态后，直接调用API（还可以直接把邮箱作为参数传给API函数，避免依赖状态更新的延迟）：

// 状态定义保持不变
const [SessionEmail, setSessionEmail] = useState('na');
const [users, setUsers] = useState([]);

useFocusEffect(
  React.useCallback(() => {   
    getUsername();
  }, [])
);

// 获取本地存储的邮箱，成功后直接调用API
const getUsername = async () => {
  try {
    const username = await AsyncStorage.getItem('Username')
    if (username !== null) {
      setSessionEmail(username);
      // 直接把拿到的邮箱传给API函数
      getUsersInfoFromAPI(username);
    }
  } catch (e) {
    console.log(e);
  }
}

// 修改API函数，接收邮箱参数
const getUsersInfoFromAPI = async (email) => {
  try {
    const response = await axios.get(`https://myapi.co.in/api/user/?email=${email}`);
    setUsers(response.data); // 注意原代码里的setUser应该是setUsers，和状态对应
  } catch (error) {
    console.log(error);
  }
}

方案二：监听邮箱状态变化触发API #

通过useEffect监听SessionEmail的变化，当它不再是初始值'na'时，再调用API：

// 状态定义保持不变
const [SessionEmail, setSessionEmail] = useState('na');
const [users, setUsers] = useState([]);

useFocusEffect(
  React.useCallback(() => {   
    getUsername();
  }, [])
);

// 监听SessionEmail的变化，符合条件时调用API
useEffect(() => {
  if (SessionEmail !== 'na') {
    getUsersInfoFromAPI();
  }
}, [SessionEmail]); // 依赖SessionEmail，状态变化时触发

const getUsername = async () => {
  try {
    const username = await AsyncStorage.getItem('Username')
    if (username !== null) {
      setSessionEmail(username);
    }
  } catch (e) {
    console.log(e);
  }
}

const getUsersInfoFromAPI = async () => {
  try {
    const response = await axios.get(`https://myapi.co.in/api/user/?email=${SessionEmail}`);
    setUsers(response.data); // 修正setUser为setUsers
  } catch (error) {
    console.log(error);
  }
}

原代码里存在一个小笔误：状态定义的是const [users, setUsers] = useState([])，但API请求里用了setUser(response.data)，这里应该改成setUsers，否则无法正确更新用户信息状态。

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