React 6.4 -在async action函数中使用createBrowserRouter分派方法

Question

我在我的路线上有这个:

{
path: "/user/login",
element: <Login />,
action: loginAction,
},

所以，当我在登录页面中提交表单时，我正确地到达了登录操作。问题是，我试图使用reducer存储一些数据，但在loginAction中，当尝试使用

时，会给我一个错误

async function action({ request }) {
const formData = await request.formData();
const dispatch = useDispatch(); <-- ERROR here

动作被导入为loginAction

import { action as loginAction } from "./pages/Login"; 

这是我得到的错误:

第38:20行:React Hook "useDispatch"在函数"action"中调用;它既不是React函数组件，也不是自定义React Hook函数。React组件名必须以大写字母开头。React的钩子名必须以"use"开头。react-hooks/rules-of-hooks

当然，如果我改变"动作";Action"它没有给我任何错误(修复导入后)，但它就是不工作。

任何线索如何使用useDispatch内部的动作函数从React 6.4?

谢谢!

使用减速机的动作功能。

Answer 1

React Hook "useDispatch"在函数"action"中调用;既不是React函数组件，也不是自定义React Hook函数

正如错误提示的，你不能在一个简单的函数中这样调用钩子!你应该调用useDispatch:

const dispatch = useDispatch();

在你的function component中，并确保它在顶层被调用。