Javascript 从Firestore获取数据后，如何预填充React钩子表单MUI文本字段？

我将React钩子窗体与MUI TextField组件一起使用。 我正在从Firestore获取数据，我想用这些数据预先填充表单

我正在使用带有默认值的useForm，但我不确定如何使用它。 通过使用扩展运算符，我能够获得一些字段上的数据。我试图找到一种方法将eventData作为对象进行反结构，以便将字段与获取的数据进行匹配

代码如下：

const [event, setEvent] = useState('')

const { register, handleSubmit, errors, reset } = useForm({
        resolver: yupResolver(schema),
        defaultValues: {...event}
    })

// get the data to prefill the form
    useEffect(() => {
        getEvent(storyId, eventId, setEvent)  
        reset(event) 
    }, [reset])

下面是一个文本字段的示例

<TextField
                        variant="outlined"
                        margin="normal"
                        fullWidth
                        id="date"
                        label="date"
                        name="date"
                        autoComplete="date"
                        type="date"
                        autoFocus
                        inputRef={register}
                        error={!!errors.date}
                        helperText={errors?.date?.message}
/>

我可以确认数据对象是否进入。。。

这是我在表格上看到的

正如您所看到的，一些数据正在填充表单，但MUI标签没有收缩，文本存在可编辑性问题。另外，由于我没有对eventData进行分解，因此没有填充日期（这是一种日期格式）和坐标（这是纬度和经度的Firestore geopoint对象）

有几个问题：

在React钩子窗体初始化对象之前，如何确保在React组件中设置数据？我可以通过重置来实现这一点。这是最佳实践吗

当表单充满数据时，如何使MUI标签收缩

如何分解eventData并将其添加到表单中

---

不幸的是，如果在初始渲染后通过编程设置了值，则不受控制的MUI输入不会重新定位其标签。用

包装您的输入，使其受到控制，然后一切都会好起来。如果您需要使用非受控组件，我所知道的使其可读的唯一方法是使用

---

看看这里：

1:不知道这是否是最佳做法。但我也是这样做的

2：我曾经遇到过同样的问题，在输入中设置

defaultValue:“

”解决了这个问题，但是@Aitwar回答的问题也应该有帮助

3：使用字段的名称创建一个对象，并用eventData的数据填充它。如果您不能做到这一点，请提供一个关于codesandbox的示例，我将尽力帮助您