React+MUI项目中TextField值不更新问题求助

问题场景 #

使用React + Material-UI开发CRUD应用时，点击表格行的编辑按钮打开弹窗，弹窗内的TextField需填充对应行数据。但出现以下异常：

• 打开弹窗点击某个TextField后关闭
• 再次点击另一行的编辑按钮打开弹窗
• 之前点击过的TextField仍显示旧行的值，只有再次点击该字段才会更新为新行的正确值

父组件核心代码 #

const [modalopen, setModalOpen] = useState(false);

const [modalProps, setModalProps] = useState<{ title: string; focusedTxtField: boolean; client: Client | null; }>({
  title: '',
  focusedTxtField: false,
  client: null,
});

const onModalClose = () => {
  setModalOpen(false)
  setModalProps({
    ...modalProps,
    title: '',
    focusedTxtField: false,
    client: null,
  });
};
  
const addModalHandle = () => {
  setModalProps({
    ...modalProps,
    title: 'Add Client',
    focusedTxtField: false,
    client: null,
  });
  setModalOpen((prev) => !prev);
};

const editModalHandle = (client: Client) => {
  setModalProps({
    ...modalProps,
    title: 'Edit Client',
    focusedTxtField: true,
    client: client,
  });
  setModalOpen((prev) => !prev);
};

return (
  <Box>
    <AddClientModal
      config={modalProps}
      handleClose={onModalClose}
      status={modalopen}
    />
);

弹窗组件核心代码 #

<Dialog fullWidth open={props.status} onClose={props.handleClose}>
  <DialogTitle
    color={'white'}
    bgcolor={'rgb(51, 171, 159)'}
    borderBottom={0.1}
  >
    {props.config.title}
  </DialogTitle>
  <Box component='form' noValidate onSubmit={handleSubmit(submitClient)}>
    <DialogContent>
      <TextField
        autoFocus
        margin='dense'
        label='Client Name'
        type='name'
        fullWidth
        focused={props.config.focusedTxtField}
        value={props.config.client?.name !== '' ? props.config.client?.name : ''}
        variant='standard'
        {...register('name', {
          required: 'Enter Client Name',
          pattern: {
            value: /^[a-z\d\-_\s]+$/i,
            message: 'Enter a valid Name',
          },
        })}
      />
    </DialogContent>
  </Box>
</Dialog>

问题根源 #

1. 表单状态与外部props脱节：同时使用react-hook-form的register和手动设置value属性，导致react-hook-form的内部表单状态与modalProps中的client数据不同步
2. 表单状态未清空：弹窗关闭时没有重置react-hook-form的表单状态，旧数据被保留
3. 未主动同步新数据：打开新的编辑弹窗时，没有将新的client数据主动同步到表单字段

修复方案 #

1. 在弹窗组件中添加表单同步逻辑 #

利用useEffect监听数据变化和弹窗状态，主动同步或重置表单：

import { useForm, useEffect } from 'react-hook-form';

// 弹窗组件内部逻辑
const { register, handleSubmit, setValue, reset } = useForm<Client>();

// 监听client数据变化，同步到表单
useEffect(() => {
  if (props.config.client) {
    setValue('name', props.config.client.name || '');
    // 其他字段同理同步
  } else {
    // 添加模式下重置表单
    reset();
  }
}, [props.config.client, setValue, reset]);

// 弹窗关闭时重置表单，清除旧值
useEffect(() => {
  if (!props.status) {
    reset();
  }
}, [props.status, reset]);

2. 移除TextField的手动value绑定 #

让react-hook-form完全控制TextField的值，避免状态冲突：

<TextField
  autoFocus
  margin='dense'
  label='Client Name'
  type='name'
  fullWidth
  focused={props.config.focusedTxtField}
  variant='standard'
  {...register('name', {
    required: 'Enter Client Name',
    pattern: {
      value: /^[a-z\d\-_\s]+$/i,
      message: 'Enter a valid Name',
    },
  })}
/>

3. 优化父组件的弹窗状态重置逻辑 #

关闭弹窗时直接重置modalProps为初始状态，避免残留旧数据：

const onModalClose = () => {
  setModalOpen(false);
  // 直接设置初始状态，无需扩展旧对象
  setModalProps({
    title: '',
    focusedTxtField: false,
    client: null,
  });
};

修复原理 #

• 通过useEffect监听数据变化，确保打开编辑弹窗时表单字段自动填充最新的client数据
• 弹窗关闭时调用reset()清空表单内部状态，彻底清除旧值
• 移除手动value绑定，让react-hook-form统一管理表单状态，避免双向绑定冲突

内容的提问来源于stack exchange，提问作者Ashwin