React-hook-forms upload/save 到 FaunaDB 的对象
react-hook-forms upload/save to an object at FaunaDB
我正在尝试 upload/save FaunaDB 的一个对象。具体来说,我正在尝试将字符串上传到 jobProfile 对象:
data: {
"jobProfile": {
"image": ""
"coverImage": ""
}
}
但是当我使用提交按钮上传字符串时,它们会像这样保存在根目录中:
data: {
"image": ""
"coverImage": ""
}
我创建了一个主要组件,其中 react-hook-forms 从 userData
获取默认值,通过 useSWR 通过 prop:
import { useForm } from "react-hook-form"
import ImageInput from "./ImageInput"
export default function Inputs({ userData }) {
const defaultValues = {
image: userData?.jobProfile?.image ? userData?.jobProfile?.image : "",
coverImage: userData?.jobProfile?.coverImage ? userData?.jobProfile?.coverImage : ""
}
const { register, handleSubmit } = useForm({ defaultValues })
const handleUpdateUser = async (data) => {
const { image, coverImage } = data
try {
await fetch("/api/updateProfile", {
method: "PUT",
body: JSON.stringify({
image, coverImage
}),
headers: {
"Content-Type": "application/json",
},
})
alert(`submitted data: ${JSON.stringify(data)}`)
} catch (err) {
console.error(err)
}
}
return (
<form onSubmit={handleSubmit(handleUpdateUser)}>
<div className="py-4">
<ImageInput register={register} />
</div>
<button type="submit">Update</button>
</form>
)
}
下面是我在主要组件中导入的 ImageInput.jsx 组件。该组件包含图像和封面图像的输入字段:
//ImageInput.jsx
export default function ImageInput({ register }) {
return (
<div className="grid gap-4">
<div>
<label
htmlFor="company-website"
className="block text-sm font-medium text-gray-700"
>
Profilbillede
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span className="text-gray-500 sm:text-sm">https://</span>
</div>
<input
type="text"
name="company-website"
id="company-website"
className="block w-full rounded-md border-gray-300 pl-16 focus:border-indigo-500 focus:ring-indigo-500 sm:pl-14 sm:text-sm"
placeholder="www.example.com/profile/avatar"
{...register("jobProfile.image", {})}
/>
</div>
<p className="mt-2 text-sm text-gray-500" id="email-description">
Indsæt billede URL (link) fra eksempelvis Facebook eller LinkedIn.
</p>
</div>
<div>
<label
htmlFor="company-website"
className="block text-sm font-medium text-gray-700"
>
Coverbillede
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span className="text-gray-500 sm:text-sm">https://</span>
</div>
<input
type="text"
name="company-website"
id="company-website"
className="block w-full rounded-md border-gray-300 pl-16 focus:border-indigo-500 focus:ring-indigo-500 sm:pl-14 sm:text-sm"
placeholder="www.example.com/profile/avatar"
{...register("jobProfile.coverImage", {})}
/>
</div>
<p className="mt-2 text-sm text-gray-500" id="email-description">
Indsæt billede URL (link) fra eksempelvis Facebook eller LinkedIn.
</p>
</div>
</div>
)
}
//updateProfile.js
import { updateProfileInfo } from "@/utils/Fauna"
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await getSession({ req })
if (!session) return res.status(401)
const userId = session.user.id
if (req.method !== "PUT") {
return res.status(405).json({ msg: "Method not allowed" })
}
const { image, coverImage } =
req.body
try {
const updated = await updateProfileInfo(
userId,
image,
coverImage
)
return res.status(200).json(updated)
} catch (err) {
console.error(err)
res.status(500).json({ msg: "Something went wrong." })
}
res.end()
}
//fauna.js
import * as Fauna from "faunadb"
const faunaClient = new Fauna.Client({
secret: process.env.FAUNA_ADMIN_SECRET,
scheme: "https",
domain: "db.eu.fauna.com",
port: 443,
})
const q = Fauna.query
const getUserById = async (id) => {
const userData = await faunaClient.query(
q.Get(q.Ref(q.Collection("users"), id))
)
delete userData.data.emailVerified
delete userData.data.createdAt
delete userData.data.updatedAt
delete userData.data.ssn
return userData.data
}
const updateProfileInfo = async (
userId,
image,
coverImage
) => {
return await faunaClient.query(
q.Update(q.Ref(q.Collection("users"), userId), {
data: {
image,
coverImage
},
})
)
}
module.exports = {
getUserById,
updateProfileInfo
}
你能看出我做错了什么吗?
在 fauna.js
中的 updateProfileInfo
函数中,您应该
data: {
jobProfile: {
image,
coverImage
}
},
不是:
data: {
image,
coverImage
},
我正在尝试 upload/save FaunaDB 的一个对象。具体来说,我正在尝试将字符串上传到 jobProfile 对象:
data: {
"jobProfile": {
"image": ""
"coverImage": ""
}
}
但是当我使用提交按钮上传字符串时,它们会像这样保存在根目录中:
data: {
"image": ""
"coverImage": ""
}
我创建了一个主要组件,其中 react-hook-forms 从 userData
获取默认值,通过 useSWR 通过 prop:
import { useForm } from "react-hook-form"
import ImageInput from "./ImageInput"
export default function Inputs({ userData }) {
const defaultValues = {
image: userData?.jobProfile?.image ? userData?.jobProfile?.image : "",
coverImage: userData?.jobProfile?.coverImage ? userData?.jobProfile?.coverImage : ""
}
const { register, handleSubmit } = useForm({ defaultValues })
const handleUpdateUser = async (data) => {
const { image, coverImage } = data
try {
await fetch("/api/updateProfile", {
method: "PUT",
body: JSON.stringify({
image, coverImage
}),
headers: {
"Content-Type": "application/json",
},
})
alert(`submitted data: ${JSON.stringify(data)}`)
} catch (err) {
console.error(err)
}
}
return (
<form onSubmit={handleSubmit(handleUpdateUser)}>
<div className="py-4">
<ImageInput register={register} />
</div>
<button type="submit">Update</button>
</form>
)
}
下面是我在主要组件中导入的 ImageInput.jsx 组件。该组件包含图像和封面图像的输入字段:
//ImageInput.jsx
export default function ImageInput({ register }) {
return (
<div className="grid gap-4">
<div>
<label
htmlFor="company-website"
className="block text-sm font-medium text-gray-700"
>
Profilbillede
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span className="text-gray-500 sm:text-sm">https://</span>
</div>
<input
type="text"
name="company-website"
id="company-website"
className="block w-full rounded-md border-gray-300 pl-16 focus:border-indigo-500 focus:ring-indigo-500 sm:pl-14 sm:text-sm"
placeholder="www.example.com/profile/avatar"
{...register("jobProfile.image", {})}
/>
</div>
<p className="mt-2 text-sm text-gray-500" id="email-description">
Indsæt billede URL (link) fra eksempelvis Facebook eller LinkedIn.
</p>
</div>
<div>
<label
htmlFor="company-website"
className="block text-sm font-medium text-gray-700"
>
Coverbillede
</label>
<div className="relative mt-1 rounded-md shadow-sm">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<span className="text-gray-500 sm:text-sm">https://</span>
</div>
<input
type="text"
name="company-website"
id="company-website"
className="block w-full rounded-md border-gray-300 pl-16 focus:border-indigo-500 focus:ring-indigo-500 sm:pl-14 sm:text-sm"
placeholder="www.example.com/profile/avatar"
{...register("jobProfile.coverImage", {})}
/>
</div>
<p className="mt-2 text-sm text-gray-500" id="email-description">
Indsæt billede URL (link) fra eksempelvis Facebook eller LinkedIn.
</p>
</div>
</div>
)
}
//updateProfile.js
import { updateProfileInfo } from "@/utils/Fauna"
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await getSession({ req })
if (!session) return res.status(401)
const userId = session.user.id
if (req.method !== "PUT") {
return res.status(405).json({ msg: "Method not allowed" })
}
const { image, coverImage } =
req.body
try {
const updated = await updateProfileInfo(
userId,
image,
coverImage
)
return res.status(200).json(updated)
} catch (err) {
console.error(err)
res.status(500).json({ msg: "Something went wrong." })
}
res.end()
}
//fauna.js
import * as Fauna from "faunadb"
const faunaClient = new Fauna.Client({
secret: process.env.FAUNA_ADMIN_SECRET,
scheme: "https",
domain: "db.eu.fauna.com",
port: 443,
})
const q = Fauna.query
const getUserById = async (id) => {
const userData = await faunaClient.query(
q.Get(q.Ref(q.Collection("users"), id))
)
delete userData.data.emailVerified
delete userData.data.createdAt
delete userData.data.updatedAt
delete userData.data.ssn
return userData.data
}
const updateProfileInfo = async (
userId,
image,
coverImage
) => {
return await faunaClient.query(
q.Update(q.Ref(q.Collection("users"), userId), {
data: {
image,
coverImage
},
})
)
}
module.exports = {
getUserById,
updateProfileInfo
}
你能看出我做错了什么吗?
在 fauna.js
中的 updateProfileInfo
函数中,您应该
data: {
jobProfile: {
image,
coverImage
}
},
不是:
data: {
image,
coverImage
},