英文:
How to use multiple actions in a single route in react router dom?
问题
我在不同的组件中有两个表单，并在完全不同的组件中显示结果。我正在使用react-router-dom中的<Form>，并使用action获取数据。如果只有一个action，它可以正常工作。所以我尝试添加额外的action，类似于以下方式：
{
path: '/show-result',
element: <ShowResult />,
action: actionFromFirstComponent,
action: actionFromSecondComponent
}
但它没有按预期工作。我还尝试过action: [actionFromFirstComponent, actionFromSecondComponent]。但react-router-dom抛出handler is not a function错误。
我尝试在谷歌中搜索在React Router路由中使用多个action，但它只显示如何为一个组件设置多个路由。
英文:
I have two forms in different components. And I'm showing the result in whole another component. I'm using <Form> from react-router-dom. And getting the data using action. It works fine if I have one action. So I tried adding an extra action, something like,
{
path: '/show-result`,
element: <ShowResult />,
action: actionFromFirstComponent,
action: actionFromSecondComponent
}
It didn't work as expected. I also tried action: [actionFromFirstComponent, actionFromSecondComponent]. But react-router-dom throws me handler is not a function error.
I tried searching multiple action in react router route in google. But, it only shows how to set multiple routes for one component.
答案1
得分: 5
你可以只有一个单一操作。这个单一操作应该接受额外的数据，以便有条件地应用一个动作逻辑或另一个动作逻辑。一种方法是附加一个隐藏的 id 字段，当表单提交时将与 formData 一起提交。操作应该读取此字段的值，然后有条件地应用正确的操作逻辑。
示例：
const multiFormAction = async (actionArg) => {
const formData = await actionArg.request.formData();
const formId = formData.get("form-id");
switch (formId) {
case "form 1":
// 这是表单 1 的逻辑
return actionFromFirstComponent(actionArg); // <-- 通过传递操作参数
case "form 2":
// 这是表单 2 的逻辑
return actionFromSecondComponent(actionArg); // <-- 通过传递操作参数
default:
// 表单提交时没有 id
// 该怎么办... 抛出错误还是返回错误？忽略？由你决定。
}
};
{
path: '/show-result',
element: <ShowResult />,
action: multiFormAction,
}
...
<Form method="post">
<input name="form-id" hidden defaultValue="form 1" />
...
<button type="submit">提交</button>
</Form>
...
<Form method="post">
<input name="form-id" hidden defaultValue="form 2" />
...
<button type="submit">提交</button>
</Form>
...
英文:
You can have only a single action. The single action should take additional data so it can conditionally apply one action logic or another. One way to do this is to append a hidden id field that will be submitted with the formData when the form is submitted. The action should read this field value and conditionally apply the correct action logic.
Example:
const multiFormAction = async (actionArg) => {
const formData = await actionArg.request.formData();
const formId = formData.get("form-id");
switch (formId) {
case "form 1":
// This is form 1 logic
return actionFromFirstComponent(actionArg); // <-- pass action arg through
case "form 2":
// This is form 2 logic
return actionFromSecondComponent(actionArg); // <-- pass action arg through
default:
// Form was submitted without an id
// What to do... throw or return error? Ignore? You decide.
}
};
{
path: '/show-result`,
element: <ShowResult />,
action: multiFormAction,
}
...
<Form method="post">
<input name="form-id" hidden defaultValue="form 1" />
...
<button type="submit">Submit</button>
</Form>
...
<Form method="post">
<input name="form-id" hidden defaultValue="form 2" />
...
<button type="submit">Submit</button>
</Form>
...
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论