reactjs - 更新的默认值未以 React 钩子形式加载

Question

我正在为我的应用程序中的项目制作更新表单。我将 REACT 与 REACT hookform 一起使用。首先，来自后端的对象的数据被检索到一个组件中。通过 props 数据进入下一个组件。正如我在 (IUpdate) 控制台日志中看到的那样，这是有效的，但在第一次渲染中它收到一个空数组。只有在第二次渲染中，包含要更新的对象的数组才可见。Useform 选项：我与此数据连接的默认值。但是，只有当我在 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;

/////////包含表单的第二部分

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;