在 Remix React 中获取 FormData 中的字段

Question

我们如何获取字段而不必单独执行此操作？

const name = (formData.get("name") ?? "") as string;

我们可以映射或迭代它吗？

代码

export const action: ActionFunction = async ({
    request,
}: ActionFunctionArgs) => {
    const formData = await request.formData();

    const name = (formData.get("name") ?? "") as string;
    const website_url = (formData.get("website_url") ?? "") as string;
    const user_id = (formData.get("user_id") ?? "") as string;

    try {
        // call api here

        return null;
    } catch (error) {
        throw json({ error: "Error" }, { status: 500 });
    }
};

Answer 1

您可以使用

Object.fromEntries()

静态方法并将您的formData对象传递给它，它将转换标准js对象。

Object.fromEntries(formData);

const formData = new FormData();
formData.set("name","Jhon");
formData.set("age","30");
console.log(Object.fromEntries(formData));

Answer 2

您使用 forEach

迭代 formData

TS 游乐场

const formData = new FormData();
formData.set("name","Jhon");
formData.set("website_url","https://example.com");
formData.set("user_id","16546551231");

let allowedFields = ['name','website_url']

let requestPayload = new Map()
formData.forEach((value,key)=> allowedFields.includes(key) && requestPayload.set(key,value))

let {name, website_url, user_id} = Object.fromEntries(requestPayload)
console.log(name,website_url,user_id)