Reactjs 使用值预填充表单

我想在react for 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;

import React，{useState}来自“React”；
从“graphql标签”导入gql；
从“@apollo/react hooks”导入{useQuery}；
从“react hook form”导入useForm；
const GET_POST=gql`
查询getPost（$id:String！）{
getPost（id:$id）{
身份证件
标题
内容
节选
作者{
名称
}
}
}
`;
const EditPost=（道具）=>{
//在这里，我使用postId获取帖子
const PostID=props.history.location.state.id；
//我用的是钩形
常量{register，errors，reset，handleSubmit}=useForm（）；
let POST={title:''，author:''，content:''，image:''，摘录：'}；
//设置窗体的初始状态
const[values，setValues]=useState({
标题：POST.title，作者：POST.author，内容：POST.content，图像：POST.image，摘录：POST.extract
});
const{data，loading，error}=useQuery（GET_POST{
变量：{id:PostID}，
});
如果（加载）返回加载；
if（error）返回error
；
const fetchedPost=data.getPost；
//当获取post以将这些值设置为state，然后使用它使表单处于被动状态时，我会遇到一个问题？？？
if（fetchedPost）{
const{title，author，content，image，extract}=fetchedPost；
}
返回(
编辑文章

职位名称：
{errors.title&&“title是必需的”}

);
}
导出默认编辑帖子；

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

请参阅文档：

值！=='条例草案",，
})}
/>

我强烈建议对react表单使用

Formik

。据我所知，这使得这一切变得非常容易，但我也希望将fetchedPost分配给state，这样我就可以添加onChangeHandler，并在表单上发生更改时做出反应

  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',
        })}
      />