reactjs - Reactフックフォームにロードされない更新のデフォルト値

Question

アプリ内のアイテムの更新フォームを作成しています。REACTフックフォームでREACTを使用しています。まず、バックエンドからのオブジェクトのデータが 1 つのコンポーネントで取得されます。props を介して、データは次のコンポーネントに入ります。(IUpdate)consolelog で確認できるように、これは機能していますが、最初のレンダリングでは空の配列を受け取ります。2 番目のレンダリングでのみ、更新するオブジェクトを含む配列が表示されます。Useform オプション: Defaultvalues このデータに接続します。しかし、フォームの事前入力は、usestate result/setResult の初期値でちょっとしたトリックを実行した場合にのみ機能します (これらの値をランダムに入れ替えます: null/empty String/currentData )。ここで私が見逃しているアイデアはありますか? または、React Hook フォームを使用して更新フォームを作成するためのより良い方法はありますか。以下は私のコードです：

///オブジェクトを取得するための最初のコンポーネント:

import React, {useContext, useEffect, useState} from 'react';
import axios from "axios";
import './AddItem.css';
import {useParams} from "react-router-dom";
import ItemUpdate from "./reusableComponents/ItemUpdate";

function ChangeItem () {

    const {id} = useParams();
    const [loading, toggleLoading] = useState(false);
    const [error, setError] = useState('');
    const [Success, toggleSuccess] = useState(false);
    const [currentItem, setCurrentItem] = useState([]);


    useEffect(() => {
        async function getCurrent() {

            try {
                const response = await axios.get(`http://localhost:8080/api/v1/items/${id}`);
                console.log('response in van change getCurrent', response.data)

                setCurrentItem(response.data)

            } catch (error) {
                console.error('Er ging iets mis, geen data gevonden', error)
            }
        }

        getCurrent();
    }, []);


    return currentItem ? <ItemUpdate current={currentItem}/> : <div>Loading...</div>
} export default ChangeItem;

/////////フォームを含む 2 番目のコンポーネント

import React, {useContext, useEffect, useState} from 'react';
import { useForm } from 'react-hook-form';
import axios from "axios";
import '../AddItem.css';

import {GrEdit, GrUpload} from "react-icons/gr";

function ItemUpdate (props) {
    console.log("props in IUpdate",props.current);
    const currentData =props.current;
    const { handleSubmit, formState: { errors }, register, reset } = useForm(
          {defaultValues : currentData}
    );
     const [loading, toggleLoading] = useState(false);
     const [error, setError] = useState('');
     const [Success, toggleSuccess] = useState(false);
     const [result, setResult] = useState("currentData");
    const onSubmit = (data) => setResult(JSON.stringify(data));


    async function sendUpdated (formData) {
        setError('');
        toggleLoading(true);

        try {
            const res = await axios.put('http://localhost:8080/api/v1/items/update',formData)
            console.log('res in update',res)
            toggleSuccess(true);
        } catch (e) {
            console.log(console.error(e))
            setError(`Het updaten is gelukt. 
            // Probeer het opnieuw (${e.message}
            )`);
        }
    }

    const formData = new FormData();

    const formSubmit = (data) => {
        formData.append("id", data.id)
        formData.append("description", data.description)
        formData.append("name", data.name)
        formData.append("difficulty", data.difficulty)
        formData.append("file", data.file[0])


        sendUpdated(formData)
    }

    return (
        <div className="add-item-container">
            <div className="add-items">
                <h1>Bewerk plant</h1>
                <form onSubmit={handleSubmit(formSubmit)} className="add-item" >
                    <input  type="text"
                            className="add-item-field"
                       
                            {...register("id", {

                            })}
                    />
                    <input  type="text"
                            className="add-item-field"
                            
                            {...register("name", {

                            })}
                    />{errors.address && <p className="errorMessage">Het veld is niet ingevuld</p>}

                    <textarea   className="add-item-field"
                                cols="30" rows="10"
                               
                                {...register("description")}
                    />
                    {errors.address && <p className="errorMessage">Vergeet niet een verzorgingshandleiding of beschrijving in te vullen</p>}

                    <div className="selectField">
                        <h3>Verzorging</h3>
                        <input  className="choose"
                                type="radio"
                                id="easy"
                               
                                value="EASY" {...register("difficulty")}/>
                        <label htmlFor="easy">Makkelijk</label>
                        <input  className="choose"
                                type="radio"
                                id="moderate"
                              
                                value="MODERATE" {...register("difficulty")}/>
                        <label htmlFor="moderate">Gemiddeld</label>
                        <input  className="choose"
                                type="radio"
                                id="hard"
                               
                                value="HARD" {...register("difficulty")}/>
                        <label htmlFor="hard">Moeilijk</label>
                    </div>
                    <div className="upload">
                        <input type="file" {...register("file", {

                        })} accept="image/jpeg"
                        />
                        {errors.address && <p className="errorMessage">Er ging iets mis met uploaden. Probeer het opnieuw.</p>}
                        <GrUpload/>
                    </div >
                    <button className="form-btn">Wijzig de plant</button>
                    {Success === true && <p>De plant is succesvol gewijzigd!</p>}
                    {error && <p className="error-message">{error}</p>}
                </form>
            </div>
        </div>
    )
} export default ItemUpdate;