javascript - 如何在另一个自定义 Hook 中使用返回值的自定义 Hook ？

Question

我正在使用 React-native，在其中，我有一个名为 useUser 的自定义 Hook，它使用 Auth.getUserInfro 方法从 AWS Amplify 获取用户信息，并且然后获取返回对象的一部分并用它设置一个状态变量。我还有另一个名为 useData 的 Hook，它根据 userId 获取一些数据并将其设置为状态变量。

使用用户自定义钩子(Hook):

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("");

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

  return id;
};

export default useUserId;

import useUserId from "./UseUserId";
// ...rest of the necessary imports

const fetchData = async (userId) = > { // code to fetch data from GraphQl}

const useData = () => {
    const [data, setData] = useState();
    
    useEffect(() => { 
        const userId = useUser();
        fetchData(userId).then( // the rest of the code to set the state variable data.)
    },[])

    return data
   }

当我尝试这样做时，我收到一条错误提示

*错误:无效 Hook 调用。钩子(Hook)只能在函数组件的主体内部调用。这可能由于以下原因之一而发生:

1. 您可能有不匹配的 React 版本和渲染器(例如 React DOM)
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中有多个 React 副本参见 https://reactjs.org/link/invalid-hook-call有关如何调试和解决此问题的提示。*

我认为问题是我在use effect内部调用了Hook useUser，但是在函数内部使用它会导致描述的问题here ，并且我不能在 fetchData 的主体之外使用它，因为 useData 本身是一个钩子(Hook)，它只能在功能组件或钩子(Hook)的主体内使用。所以我不知道如何找到解决这个问题的方法。

Answer 1

正确，React hooks 只能从 React 函数组件和其他 React hooks 中调用。 useEffect 钩子(Hook)的回调不是 React 钩子(Hook)，它是一个回调。根据Rules of Hooks , 不要在循环、条件或嵌套函数中调用钩子(Hook)。

我建议重构 useData Hook 以将 userId 作为参数使用，以在 useEffect 的依赖数组中使用。

const fetchData = async (userId) => {
  // code to fetch data from GraphQl
};

const useData = (userId) => {
  const [data, setData] = useState();
    
  useEffect(() => { 
    fetchData(userId)
      .then((....) => {
        // the rest of the code to set the state variable data.
      });
  }, [userId]);

  return data;
};

在函数组件中的使用:

const userId = useUser();
const data = useData(userId);

如果这是通常配对的东西，抽象成一个钩子(Hook):

const useGetUserData = () => {
  const userId = useUser();
  const data = useData(userId);
  return data;
};

...

const data = useGetUserData();

虽然你应该像下面这样只实现一个钩子(Hook):

const useGetUserData = () => {
  const [data, setData] = useState();

  useEffect(() => {
    getUserInfo()
      .then(fetchData) // shortened (userId) => fetchData(userId)
      .then((....) => {
        // the rest of the code to set the state variable data.
        setData(....);
      });
  }, []);

  return data;
};