Custom React-native Hook 运行调用它两次的组件。我不明白为什么

Question

我正在尝试学习在 React-native 中使用自定义 Hooks。我使用 AWS Amplify 作为我的后端，它有一个方法来获取经过身份验证的用户的信息，即 Auth.currentUserInfo 方法。但是，它 returns 是一个对象，我想对 returns 我需要的对象部分进行自定义挂钩，并将这部分代码从可视化部分抽象出来。我有一个名为 App 的组件和一个名为 useUserId 的自定义 Hook。它们的代码如下：

useUserId 钩子：

import React, { useState, useEffect } from "react";
import { Auth } from "aws-amplify";

const getUserInfo = async () => {
  try {
    const userInfo = await Auth.currentUserInfo();
    const userId = userInfo?.attributes?.sub;
    return userId;
  } catch (e) {
    console.log("Failed to get the  AuthUserId", e);
  }
};

const useUserId = () => {
  const [id, setId] = useState("");
  const userId = getUserInfo();

  useEffect(() => {
    userId.then((userId) => {
      setId(userId);
    });
  }, [userId]);

  return id;
};

export default useUserId;

App 组件：

import React from "react";
import useUserId from "../custom-hooks/UseUserId";

const App = () => {
  const authUserId = useUserId();
  console.log(authUserId);

但是，当我尝试运行 App 组件时，我在屏幕上得到了两次相同的 Id，这意味着 App 组件再次被执行。

这个问题是我在另一个自定义 Hook 中使用这个自定义 Hook，我们称它为 useFetchData，它根据 userId 获取一些数据，然后每次执行时也会重新 -执行，这会导致一些问题。

我是 React 的新手，请您指导我这里做错了什么，以及解决这个问题的方法是什么。谢谢。

Answer 1

将 userId.then 替换为 getUserId()。然后。在组件主体中包含 getUserId 的结果是没有意义的，因为它是一个承诺，并且每次组件呈现时代码都将是运行。

Answer 2

问题可能是由于您在钩子主体中声明了 userId。当在 App 组件中调用 useUserId 时，它会声明 userId 并更新状态。这会触发重新渲染并再次声明 userId，并再次更新状态，这次使用相同的值。 useState 挂钩第二次更新为相同的值会退出循环。

Bailing out of a state update

If you update a State Hook to the same value as the current state, React will bail out without rendering the children or firing effects. (React uses the Object.is comparison algorithm.)

要么将 const userId = getUserInfo(); 移出 useUserId 挂钩

const userId = getUserInfo();

const useUserId = () => {
  const [id, setId] = useState("");

  useEffect(() => {
    userId.then((userId) => {
      setId(userId);
    });
  }, []);

  return id;
};

或更多它进入 useEffect 回调主体。

const useUserId = () => {
  const [id, setId] = useState("");

  useEffect(() => {
    getUserInfo().then((userId) => {
      setId(userId);
    });
  }, []);

  return id;
};

并且在这两种情况下删除 userId 作为 useEffect 挂钩的依赖项。

Custom React-native Hook 运行调用它两次的组件。我不明白为什么

Custom React-native Hook runs the component that calls it twice. I don't understand why

async-await

reactjs

react-native

aws-amplify

react-hooks