用值预填充 React 表单

Question

我想在 React 中为 Post 创建编辑表单，所以我的工作流程是获取帖子，设置表单的状态，然后显示它...我试图在功能组件中创建它，因为我很容易在那里使用 graphql

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/react-hooks';
import useForm from 'react-hook-form';

const GET_POST = gql`
query getPost($id: String!) {
    getPost(id: $id) {
      id
      title
      content
      excerpt
      author {
          name
      }
    }
  }
`;

const EditPost = (props) => {
     //  here Im using postId to fetch post
    const PostID = props.history.location.state.id;
      // Im using react-hook-form
    const { register, errors, reset, handleSubmit } = useForm();
    let POST = { title: '', author: '', content: '', image: '', excerpt: '' };
    //set initial state of form
    const [values, setValues] = useState({
        title: POST.title, author: POST.author, content: POST.content, image: POST.image, excerpt: POST.excerpt
    });


    const { data, loading, error } = useQuery(GET_POST, {
        variables: { id: PostID },
    });

    if (loading) return <p>LOADING</p>;
    if (error) return <p>ERROR</p>;

    const fetchedPost = data.getPost;
    // here is a problem I would like when post is fetched to set those values to state & then use it to make form reactive ???
   if (fetchedPost) {
        const { title, author, content, image, excerpt } = fetchedPost;

    }

    return (
        <div className="edit-form">
            <h2>Edit Post</h2>
            <fieldset>
                <form>
                    <p className="form-group">
                        <label htmlFor="title">Post Title: </label>
                        <input type="text" name="title" id="name"
                            value={values.title}
                            aria-invalid={errors.title ? 'true' : 'false'}
                            aria-describedby="error-title-required error-title-maxLength"
                            ref={register({ required: true, maxlength: 20 })}
                            placeholder="Name" />
                        <span>{errors.title && 'Title is required'} </span>
                    </p>

                </form>
            </fieldset>

        </div>);
}


export default EditPost;

问题是当我获取帖子时我不知道如何设置表单的状态以及如何使表单具有反应性？？？

Answer 1

请参阅文档：https://github.com/react-hook-form/react-hook-form/blob/fa5e71ca5eef76ae29b9cda774061051e5182162/examples/customValidation.tsx

  const intialValues = {
    firstName: 'bill',
    lastName: 'luo',
    email: 'bluebill1049@hotmail.com',
    age: -1,
  };

      <input
        defaultValue={intialValues.firstName}
        name="firstName"
        placeholder="bill"
        ref={register({
          validate: value => value !== 'bill',
        })}
      />