在通过React-Hook-Forms更改值之后，如何触发MUI的Textfield的rerender？

Question

我使用Mitalui Textfields渲染一种表格。我使用react-hook-form来控制它，并提供最初空白的defaultValues。

对API进行查询以获取用户的帐户数据，因此defaultValues在初始表单呈现后进行更新。

在我的表单处理程序中，我使用使用 reset（）带有新填充的数据的表单（这也是从API收到更新的数据后完成的。

这可以正常工作，除非初始DefaultValues为空白。当它们被填充时，该值将进入...但是标签不会向上移动，并且占位符并未删除。

如果初始数据为空白：

​

​conil.png“ rel =” nofollow noreferrer“>

仅在我手动之后编辑字段进行标签的表现：

​

​ref不这样做？

代码：

import React, { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import * as Yup from 'yup'

import { yupResolver } from '@hookform/resolvers/yup'
import Button from '@material-ui/core/Button'
import BaseTextField from '@material-ui/core/TextField'

// Example form schema
const schema = Yup.object().shape({
  firstName: Yup.string(),
})

/* A thin wrapper around MUI textField to convert the name of ref
 * prop to `innerRef`, to make MUI match with react-hook-form's register pattern
 */
// eslint-disable-next-line react/display-name
const TextField = React.forwardRef((props, ref) => (
  <BaseTextField {...props} inputRef={ref} />
))

/**
 * An adapter interfacing between react-query's mutate() function and react-hook-form
 */
const MyForm = ({ data, mutate, submitting }) => {
  const { register, handleSubmit, reset } = useForm({
    defaultValues: data,
    resolver: schema ? yupResolver(schema) : undefined,
  })

  // Reset the form values if new data is received (e.g. from API refresh or from
  // the initial GET query)
  // TODO If using this with MUI outlined text fields that were previously blank,
  // This won't cause the label to shift up. What a bum bum.
  useEffect(() => {
    reset(data)
  }, [reset, data])

  return (
    <form onSubmit={handleSubmit(mutate)}>
      <TextField
        disabled={submitting}
        fullWidth
        id="firstName"
        label="First Name"
        margin="normal"
        variant="outlined"
        // NOTE my TextField is already adapted to forward `ref` from spreading register
        {...register('firstName')}
      />
      <Button
        variant="contained"
        disabled={submitting}
        color="primary"
        type="submit"
      >
        Save
      </Button>
    </form>
  )
}