一个函数组件是一个同步函数，并且作为一个组件有生命周期钩子。异步调用是副作用，应该由钩子处理，而不是通过在函数体中传递承诺。参见SO answer。

• • 选项1-将useEffect与useState一起使用：**

将api调用 Package 在useEffect中，当api调用成功时设置wallet状态，从钩子返回wallet状态：

export const useMetamask = () => {
  const [wallet, setWallet] = useState<string | null>(null);
  
  useEffect(() => {
    const fetchWallet = async(): Promise<string | null> => {
      try {
        const accounts: string[] = await window.ethereum.request({
          method: 'eth_requestAccounts'
        });

        setWallet(accounts[0]);

      } catch (e) {
        console.error(e);

        return null;
      }
    }
    
    fetchWallet();
  }, []);

  return wallet;
}

• • 用法：**

从钩子中获取wallet，可以是null或实际值：

const wallet = useMetamask();

当wallet实际存在（而不是null）时，只调用enable。我们将使用enable选项（参见Dependent Queries），根据wallet的值启用/禁用查询：

useQuery(
  ['user', wallet],
  () => getUserByWallet(wallet),
  {
  // The query will not execute until the wallet exists
  enabled: !!wallet,
  }
)

• • 选项2-使用两个useQuery挂钩**

由于您已经使用了useQuery，因此需要手动编写一个钩子，只需从另一个useQuery调用中获取wallet即可：

const wallet useQuery('wallet', fetchWallet);

useQuery(
  ['user', wallet],
  () => getUserByWallet(wallet),
  {
  // The query will not execute until the wallet exists
  enabled: !!wallet,
  }
)

创建一个钩子然后只从钩子返回一个函数是一个坏主意。这也是一个承诺。从你的钩子返回一个对象。然后在你的调用者中等待它。

export const useMetamask = () => {

    //Todo: Create check if metamask is in browser, otherwise throw error
    const fetchWallet = async (): Promise<string | null> => {
        try {
            const accounts: string[] = await window.ethereum.request(
                {
                    method: 'eth_requestAccounts'
                },
            );

            return accounts[0];

        } catch(e) {
            console.error(e);

            return null;
        }
    }
    
    return { fetchWallet };
}

然后在你的呼叫器中

const { fetchWallet } = useMetamask();
const wallet = await fetchWallet();

useQuery(
    ['user', wallet],
    () => getUserByWallet(wallet),

此外，请在钩子中使用小写字母“useSomething”，以将其与UI组件区分开来

您需要在自定义钩子中使用useState。

// move fetchWallet function to utils and import it here for better code smells

export const useMetamask = () => {
    const [wallet, setWallet] = useState(null);
    // you do not want to fetch wallet everytime the component updates, You want to do it only once.
    useEffect(()=>{
        fetchWallet().then(wallet => setWallet(wallet)).catch(errorHandler);
    }, [])
    return wallet;
}

在其他钩子中，检查wallet是否为空并进行相应处理。