React Native如何处理useEffect内有依赖的多个API调用

你遇到的问题核心是两个异步请求没有做时序绑定，第二个请求的触发时机没有关联第一个请求的完成状态，下面给出两种可直接落地的实现方案：

方案1：同异步函数内串联调用（最推荐，无状态依赖问题） #

把有依赖的两个请求放在同一个async流程里，第一个请求拿到返回值后直接把参数传给第二个请求，不需要通过组件状态传递，完全避免时序误差：

1. 先修改头像请求函数，改为接收avatarId作为入参，不依赖外部状态：

const GET_ACTIVE_PROFILE_PICTURE = async (avatarId) => {
  // 无有效id直接终止请求
  if (!avatarId) return;
  try {
    const rez = await axios
      .get(`${API}/api/documents/document/${avatarId}`, axiosConfig)
      .then((r) => r.config.url)
      .catch((e) => console.log("ERROR", e));
    return rez;
  } catch {
    console.log("error");
  }
};

2. 修改用户信息请求的处理函数，拿到用户数据后直接调用头像请求：

const USER_INFO_SETTER = async () => {
  const fulldata = await getUserInfo();
  // 接口请求失败直接终止后续操作
  if (!fulldata) return;
  setUsername(fulldata.username);
  setDisplayname(fulldata.display_name);
  setId(fulldata.id);
  // 直接拿到avatarId值，不需要等状态更新
  const avatarId = getAvatarId(fulldata.profile_image);
  setFirstName(fulldata.first_name);
  setLastName(fulldata.last_name);
  // 直接传参调用头像请求
  const avatarLink = await GET_ACTIVE_PROFILE_PICTURE(avatarId);
  setProfileImage(avatarLink);
};

3. 删除原来单独触发头像请求的useEffect即可。

方案2：给第二个请求的useEffect添加依赖项 #

如果业务逻辑需要把两个请求拆分，就给第二个请求的触发依赖绑定第一个请求返回的参数状态，只有参数有效时才发起请求：

// 假设你存储avatar_id的状态变量为user.avatar_id，填到依赖项里
useEffect(() => {
  // 只有avatar_id存在且有效时才发起请求
  if (user.avatar_id) {
    avatarSetted();
  }
}, [user.avatar_id]);

注意事项 #

• 异步请求前一定要加参数有效性校验，避免无效请求触发服务端错误
• 可以结合加载状态给页面加loading效果，避免用户看到空内容
• 组件卸载时建议取消未完成的异步请求，避免内存泄漏，可使用axios的CancelToken实现

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