开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第45天，点击查看活动详情

写在前面

本篇是react学习的第十三篇，React Router 编辑数据

React Router 编辑数据

建议从我的文章：react入门9，这样比较有连续性。该系列所有的代码都是跟着官网教程进行。

本篇文章我们来分析一下src\routes\edit.jsx代码的逻辑，首先看src\main.jsx：

{
  path: "contacts/:contactId/edit",
  element: <EditContact />,
  loader: contactLoader,
  action: editAction,
},

路由下配置了loader加载器和action，loader用的是contactLoader，看过上篇文章的同学应该记得，我们获取一条contact记录的详情信息就是用的这个loader，所以这里也是在获取详情信息，这里获取详情信息的目的是回显表单数据，我们点击Edit按钮之后，如果已经保存过这条contact记录的信息，会将这些信息再显示到表单中。

同时这里还配置了action，import EditContact, { action as editAction } from "./routes/edit";通过这段代码我们可以知道editAction来自routes/edit文件，所以我们再看src\routes\edit.jsx文件，看下面这个表单<Form method="post" id="contact-form">，每个输入框都有各自的名称（name）：first、last、twitter、avatar、notes，表单会自动序列化到action的request的formData()，因此需要一个name来区分这些值，我们可以通过formData.get('first')来获得name为first的输入框的内容。

再看下面的action方法，他先获得所有的表单信息，通过Object.fromEntries(formData)转换为一个对象，然后调用编辑接口，编辑成功后将路由重定向到/contacts/${params.contactId}，即详情页面，如此，我们的编辑逻辑就介绍完毕。

export async function action({ request, params }) {
    const formData = await request.formData();
    const updates = Object.fromEntries(formData);
    await updateContact(params.contactId, updates);
    return redirect(`/contacts/${params.contactId}`);
}

<Form method="post" id="contact-form">
    <p>
        <span>Name</span>
        <input
            placeholder="First"
            aria-label="First name"
            type="text"
            name="first"
            defaultValue={contact.first}
        />
        <input
            placeholder="Last"
            aria-label="Last name"
            type="text"
            name="last"
            defaultValue={contact.last}
        />
    </p>
    <label>
        <span>Twitter</span>
        <input
            type="text"
            name="twitter"
            placeholder="@jack"
            defaultValue={contact.twitter}
        />
    </label>
    <label>
        <span>Avatar URL</span>
        <input
            placeholder="https://example.com/avatar.jpg"
            aria-label="Avatar URL"
            type="text"
            name="avatar"
            defaultValue={contact.avatar}
        />
    </label>
    <label>
        <span>Notes</span>
        <textarea
            name="notes"
            defaultValue={contact.notes}
            rows={6}
        />
    </label>
    <p>
        <button type="submit">Save</button>
        <button type="button" onClick={() => {
            navigate(-1);
        }}>Cancel</button>
    </p>
</Form>

写在最后

以上就是React Router 编辑数据所有代码和说明