React Native UseEffect API 调用

Posted 2023-02-16

【中文标题】React Native UseEffect API 调用

【英文标题】：React Native UseEffect API CALLS

【发布时间】：2021-12-28 11:50:13

【问题描述】：

如何在同一个渲染中处理多个 api 调用？

例子：

我想从第一个 API 调用中获取一些信息，例如：

 const getUserInfo = async () => 
const response = await axios
  .get(`$API/api/tenants/$app.tenant/users/me`, axiosConfig)
  .then((r) => 
    return r.data;
  )
  .catch((e) => 
    console.log("ERORR", e);
  );

return response;


 ;

  const USER_INFO_SETTER = async () => 
    const fulldata = await getUserInfo();
    setUsername(fulldata.username);
    setDisplayname(fulldata.display_name);
    setId(fulldata.id);
    getAvatarId(fulldata.profile_image);
    setFirstName(fulldata.first_name);
    setLastName(fulldata.last_name);
  ;

  useEffect(() => 
    USER_INFO_SETTER();
  , [isFocused]);

我想立即将它用于此调用下的下一个 API CALL

示例：

const GET_ACTIVE_PROFILE_PICTURE = async () => 
try 
  const rez = await axios

    .get(`$API/api/documents/document/$user.avatar_id`, axiosConfig)
    .then((r) => 
      return r.config.url;
    )
    .catch((e) => 
      console.log("ERROR", e);
    );
  return rez;
 catch 
      console.log("error");
    
  ;

  const avatarSetted = async () => 
    const avatarLink = await GET_ACTIVE_PROFILE_PICTURE();
    setProfileImage(avatarLink);
  ;

  useEffect(() => 
    avatarSetted();
    console.log("123");
  , []);

所以问题是如何使用我在下面的 api 调用中获得的第一个 API 调用中的信息。因为没有这些信息，例如 user.id_picture，我的第二个 api 调用将返回 500。

感谢您的帮助:)

【参考方案1】：

首先，我会创建几个这样的函数：

const getUserInfo = () => 
  // This contains the axios request and returns the response.
;

const getActiveProfilePicture = () => 
  // This contains the axios request and returns the response.
;

const fetchUserInfo = () => 
  // This calls the getter and uses the response to update state.
;

const fetchActiveProfilePicture = () => 
  // This calls the getter and uses the response to update state.
;

我还要介绍 2 个状态变量，你可能已经有了这些，所以这一步可能是不必要的。

const [avatarId, setAvatarId] = useState(null);
const [profileImage, setProfileImage] = useState(null);

为您在上面添加的函数填写逻辑。

const fetchUserInfo = useCallback(async () => 
  const response = await getUserInfo();
  
  // Perform all state updates.
  setAvatarId(response.profile_image);
, []);

const fetchActiveProfilePicture = useCallback(async () => 
  const response = await getActiveProfilePicture();

  // Perform all state updates.
  setProfileImage(response);
, []);

接下来，创建两个useEffects：

组件挂载后，调用fetchUserInfo。 当avatarId 被检索并最终设置为状态时，调用fetchActiveProfilePicture。

useEffect(() => 
  fetchUserInfo();
, [fetchUserInfo]);

useEffect(() => 
  if(avatarId) 
    fetchActiveProfilePicture();
  
, [fetchActiveProfilePicture, name]);

在此示例中，您将遇到一些来自 eslint (react-hooks/exhaustive-deps) 的警告，这些警告是关于将函数包装在 useCallback 中或将逻辑直接放在 useEffect 中。请注意。

Here's an example on CodeSandbox with the PokeAPI.