将 session 用户数据传递到表单中以使用 nextjs 进行反应编辑

Question

I have the following form,我有以下表格，

import { useState } from 'react';
import Head from 'next/head';
import { FormProvider, useForm } from 'react-hook-form';
import { useSession } from 'next-auth/client';

// components
import ErrorsPopup from '@/components/ErrorsPopup';
import FormField from '@/components/Forms/FormField';
import Button from '@/components/Button';

const Profile = () => {
  const methods = useForm();
  const { handleSubmit, register } = methods;

  const [session, loading] = useSession();

  // default field states
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');

  const onSubmit = async (data) => {
    alert(JSON.stringify(data));
  };

  return (
    <>
      <Head>
        <title>Ellis Development - My Profile</title>
      </Head>

      <div className="flex flex-col justify-center w-full">
        <h1 className="text-4xl font-extrabold text-grey-800">
          Profile {session?.firstname} {session?.lastname}
        </h1>

        {/* Form */}
        <FormProvider {...methods}>
          {/* errors */}
          <ErrorsPopup />

          <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-y-6 sm:gap-x-8 mt-8">
            {/* first name field */}
            <FormField
              {...register('firstname', {
                required: 'First name is required'
              })}
              name="firstname"
              label="First name"
              value={session?.firstname}
              onChange={(event) => setFirstName(event.target.value)}
              required
              disabled
            />

            {/* last name field */}
            <FormField
              {...register('lastname', {
                required: 'Last name is required'
              })}
              name="lastname"
              label="Last name"
              value={session?.lastname}
              onChange={(event) => setLastName(event.target.value)}
              required
              disabled
            />

            {/* username field */}
            <FormField
              {...register('username', {
                required: 'Username is required'
              })}
              name="username"
              label="Username"
              value={session?.username}
              onChange={(event) => setUsername(event.target.value)}
              required
              disabled
            />

            {/* password field */}
            <FormField
              {...register('email', {
                required: 'Email is required'
              })}
              type="email"
              name="email"
              label="Email"
              value={session?.email}
              onChange={(event) => setEmail(event.target.value)}
              required
              disabled
            />

            <div className="flex">
              <Button type="submit" label="Save" icon="SaveIcon" />
              <span className="edit_btn">
                <Button type="button" label="Edit" icon="PencilIcon" variant="secondary" />
              </span>
            </div>
          </form>
        </FormProvider>
      </div>
    </>
  );
};

export default Profile;

I've set state, but and I can click the edit button I can click into the form field but I can't actually edit the data, I'm not sure if I've set something up wrong or is there a way to pass the data into the state itself?我已经设置了 state，但是我可以单击编辑按钮我可以单击表单字段但我实际上无法编辑数据，我不确定我是否设置错误或有办法将数据传递到 state 本身？

I can confirm the data is showing in the alert when I submit the form but I can't actually edit any of the data.当我提交表单时，我可以确认数据显示在警报中，但我实际上无法编辑任何数据。

Answer 1

try to pass initial to data to the useForm you can pass session as default value or reset it尝试将初始数据传递给useForm您可以将 session 作为默认值传递或重置它

add useEffect to reset to reset form with session if exist添加 useEffect 以重置以使用 session 重置表单（如果存在）

...
useEffect(()=>{
   //reset form with session values if session exist
   if(session){
      methods.reset(session)
   }
},[])
...

将 session 用户数据传递到表单中以使用 nextjs 进行反应编辑

问题描述

1 个解决方案

解决方案1
0 2021-12-30 05:04:04

将 session 用户数据传递到表单中以使用 nextjs 进行反应编辑

问题描述

1 个解决方案

解决方案1 0 2021-12-30 05:04:04

解决方案1
0 2021-12-30 05:04:04