共享函数无效的钩子调用

Question

我是react的新手，我正在创建用于更新项目状态的共享公共功能。这样做的目的是在其他模块上重用该函数。然而，我在无效钩子调用上面临运行时错误(无效钩子调用。钩子只能在函数组件的内部调用)。如何修改函数来修复无效的钩子调用?

export async function updateStatus(sectionId:number, statusId: number ) {
useEffect(() => {
const {updateProSecStatus} = useUpProSecStatus(); // GQL Mutation 
const {setAlertMsg} = useContext(AlertMsgContext);
const fetchData = async () => {
let res = await updateProSecStatus({
projectSectionid: sectionId,
statusId: statusId,
});
if (res.errors) {
setAlertMsg({
message: 'Error: Failed to update status',
variant: 'error',
});
}
};
fetchData;
});
}

Answer 1

我不太确定，但你可以尝试一下....

把这两行写在你的组件开始的顶层

const {updateProSecStatus} = useUpProSecStatus(); // GQL Mutation 
const {setAlertMsg} = useContext(AlertMsgContext);

Answer 2

当钩子的规则被违反时，会发生错误。

检查每一个。例如，确保你只在函数组件或其他钩子中调用钩子(而不是在类组件或常规js函数中)

只从React函数中调用钩子，不要从常规函数中调用钩子JavaScript函数。相反，您可以:

✅从React函数组件调用钩子。

✅从自定义钩子调用钩子

react文档的另一个有趣的地方:

自定义钩子是一个JavaScript函数，其名称以" use "开头这就可以叫别的胡克斯来了。例如，下面的useFriendStatus为第一个自定义Hook

所以一定要把你的函数重命名为:useUpdateStatus.