无法使用 api 调用更新使用表单字段，无法定义

Question

我想做的:用获取的API DATA填充我的表单字段，并在呈现页面时用相应的项预填充字段。

我的问题很简单:我有一个API调用从我的DB，我把它放在我的状态。但是我不知道如何在我的api调用完成后查看字段中的数据，因为我得到了"未定义">

我已经尝试了一些东西与setValues的useForm，但我仍然不能使它工作。

下面是我的代码:

const preloadedValues = {
title: drawingData && drawingData[0].title,
imageLink: drawingData && drawingData[0].imageLink,
};
const {
register,
reset,
handleSubmit,
formState: { errors },
} = useForm({ defaultValues: preloadedValues });
useEffect(() => {
async function fetchOneDrawingData() {
const data = await fetchOneDrawing(id);
setDrawingData(data);
reset(data);
}
fetchOneDrawingData();
}, []);

下面是我的表单字段(bootstrap)的一个例子

<Form.Group className='mb-3'>
<Form.Label>Title</Form.Label>
<Form.Control
placeholder='Drawing title'
type='text'
name='title'
ref={register}
{...register('title', {
required: 'Merci de spécifier un titre',
})}
/>
</Form.Group>

非常感谢您的时间

Answer 1

问题解决了!

useEffect(() => {
async function fetchOneDrawingData() {
const data = await fetchOneDrawing(id);
setDrawingData(data);
reset(data[0]);
}
fetchOneDrawingData();
}, [reset]);