我的 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 can only be called inside the body of a function component”錯誤，所以很自然地我做錯了。我只是不明白為什么這個函式不能轉換為鉤子。我將如何使用它？這是一個愚蠢的想法嗎？如果它是愚蠢的，我很好w/拉用戶并將其傳遞給這個函式......只是我這樣做了很多，把它放在組件本身中似乎很乏味和毫無意義。
除了用于顯示 React 組件的函式之外，是否有一種更簡單的方法可以從普通函式訪問背景關系值？
uj5u.com熱心網友回復：
你當然可以做你想做的事！只是你需要寫一個自定義的鉤子。您可以在函陣列件和其他鉤子內部呼叫 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
}
你可以用這種模式走得很遠。這么大的力量！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/388142.html
標籤：javascript 反应 ecmascript-6 反应钩子