为什么我不能将其转换为自定义的 React 钩子？

Question

我的 React 应用程序中有一个薄的“服务层”，我用它来将尽可能多的业务逻辑推送到其中，并保持我的组件干净。

我一直为此使用普通函数 - 传入参数并执行所有步骤（读取/写入数据、格式化内容等）

但是，既然我已经对钩子更加熟悉了，我想知道是否可以将这些函数视为钩子，以使我的生活更轻松。例如，我希望能够在需要时从该服务层访问存储在上下文中的用户对象。

像这样：

import { useContext } from "react";

import { AppContext } from "../component/global/app_context";

const Save = async link => {
    let { user } = useContext(AppContext); //bombs on this line!
    
    //...do stuff...
    
    return true;
};

export default Save;

然后我会这样称呼它：

const onEditSave = async link => {
    let updateRes = await Save(link);
    ...do other things...redirect, etc.
};

我不断收到可怕的“只能在函数组件的主体内部调用 Hooks”错误，所以我自然是做错了。我只是不明白为什么这个函数不能转换为钩子。我将如何使用它？这是一个愚蠢的想法吗？如果它是愚蠢的，我可以拉用户并将其传递给这个函数......只是我这样做了很多，把它放在组件中似乎很乏味和毫无意义自己。

除了用于显示 React 组件的方法之外，还有更简单的方法可以从普通函数访问上下文值吗？

Answer 1

你当然可以做你想做的事！只是你需要编写一个自定义钩子。你可以在函数组件中调用 React 钩子和在其他钩子中。

一种常见的模式是从您的自定义钩子返回函数，该函数使用来自其他钩子的值。

在您的情况下，我认为最好的方法是编写一个自定义挂钩，让您可以访问您创建的AppContext，以及其他“实用程序”。

类似的东西。

// Inside component/global/app_context
import React, { useContext } from "react";

const AppContext = React.createContext()

const useAppContext = () => {
    const context = useContext(AppContext);
  
    function saveUser() {
        // ...do stuff with appContext.user ...
    }

    return {
      ...context,
      saveUser,
    }
}

export default useUserContext;

然后你可以像这样访问它：

const MyComponent = () => {
    const {user, saveUser} = useAppContext()
    //...rest of component
}

你可以用这种模式走得很远。这么大的力量！