自定义反应本机Hook运行两次调用它的组件。我不明白为什么 [英] Custom React-native Hook runs the component that calls it twice. I don't understand why

问题描述

我正在尝试学习如何在原生反应中使用自定义钩子。我使用AWS Amplify作为我的后端，它有一个方法来获取经过身份验证的用户的信息，即Auth.currentUserInfo方法。然而，它返回的是一个对象，我想做一个定制的钩子，既返回我需要的对象部分，又从可视化部分抽象出我的这部分代码。我有一个名为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，它根据用户ID获取一些数据，然后每次执行时也会重新执行，这会导致一些问题。

我是个新手，你能告诉我我做错了什么吗？这个问题的解决方案是什么？谢谢。

推荐答案

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

Bailing out of a state update

如果将状态挂钩更新为与当前状态相同的值， Reaction将在不渲染孩子或射击效果的情况下跳出。 (Reaction使用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挂钩的依赖项。

这篇关于自定义反应本机Hook运行两次调用它的组件。我不明白为什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！