react-hook-form：更新表单数据

Question

在我的项目中使用 react-hook-form 来更新和创建细节。 更新表单中存在问题，值未正确更新，并且代码

国家更新.tsx

import React from 'react'
import { useQuery } from 'react-query'
import { useParams } from 'react-router-dom'
import { useCountryUpdate } from '../api/useCountryUpdate'
import { getDetails, useDetails } from '../api/useDetails'
import { CountryCreateUpdateForm } from '../forms/createupdateForm'


interface data{
  id: string,
  name: string
 }

export const CountryUpdatepage = () => {
  const { dataId }: any = useParams()
  const { data, isLoading, isError } = useQuery(['details', dataId], () => getDetails(dataId), {
    enabled: !!dataId,
  });

  const { mutateAsync } = useCountryUpdate();

  const onFormSubmit = async() =>{
    console.log("mutate", {...data})
    await mutateAsync({...data, dataId})
    
  }
    
  return (
    <div>
      <h3>Update Details</h3>
        <CountryCreateUpdateForm defaultValues={data} onFormSubmit={onFormSubmit} isLoading={undefined}/>
    </div>
  )
}

这里，console onFormSubmit里面的值时，显示的数据和之前的state一样

创建updateform.tsx

import { useState } from "react"
import { useCountryCreate } from "../api/usecountrycreate"
import { useForm } from "react-hook-form"

export const CountryCreateUpdateForm = ({ defaultValues, onFormSubmit, isLoading }: any) => {
    // console.log("name", defaultValues.data.name)
    const { register, handleSubmit } = useForm({ defaultValues:defaultValues?.data });
  
    const onSubmit = handleSubmit((data) => {
      onFormSubmit(data)
    })

  return (

        <form onSubmit={onSubmit}>
            <div>
              <label>Name</label>
              <input {...register('name')} type="text" name="name" />   
            </div>         
            <button type="submit" >submit</button>
        </form>



  )
}

我是反应 typescript 的初学者，请给我建议来解决这个问题。

Answer 1

在国家更新.tsx

数据在开始时未定义，因此表单的 defaultValue 此后不会更新；

它应该有帮助：

 return (
    <div>
      <h3>Update Details</h3>
        {data?.data && <CountryCreateUpdateForm defaultValues={data} onFormSubmit={onFormSubmit} isLoading={undefined}/>
    }
    </div>
  )