React MUI Stepper-Dialog中react-hook-form的setValue无法填充TextField值

针对你遇到的react-hook-form结合MUI Dialog+Stepper表单无法填充编辑数据的问题，核心解决思路是确保在表单组件可用时，正确初始化表单值，以下是具体可行的方案：

1. 优先使用reset而非单个setValue #

react-hook-form的reset方法可以一次性初始化整个表单的所有字段值，比逐个调用setValue更可靠，尤其适合多步骤表单场景。

实现步骤： #

• 在Dialog所在的父组件中，维护编辑数据状态和Dialog开关状态
• 点击编辑按钮时，先设置编辑数据，调用reset填充表单，再打开Dialog

import { useForm } from "react-hook-form";
import { useState } from "react";
import Dialog from "@mui/material/Dialog";
// 导入你的Stepper和步骤组件

const ParentComponent = () => {
  const { control, reset } = useForm();
  const [editItem, setEditItem] = useState(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);

  // 点击编辑按钮触发
  const handleEditClick = (item) => {
    setEditItem(item);
    // 用编辑数据重置整个表单
    reset(item);
    setIsDialogOpen(true);
  };

  // 关闭Dialog时清空表单状态
  const handleDialogClose = () => {
    setIsDialogOpen(false);
    setEditItem(null);
    reset({}); // 重置为空，避免新增时残留编辑数据
  };

  return (
    <>
      {/* 列表和编辑按钮 */}
      <Dialog open={isDialogOpen} onClose={handleDialogClose}>
        {/* 你的Stepper和步骤表单，确保使用同一个control */}
        <YourStepperForm control={control} />
      </Dialog>
    </>
  );
};

2. 嵌套步骤组件中通过useFormContext同步数据 #

如果你的步骤组件是嵌套的，且用FormProvider包裹了表单，可在子组件中监听编辑数据变化，触发重置：

第一步：在父组件中用FormProvider包裹表单 #

import { FormProvider, useForm } from "react-hook-form";

// 在ParentComponent的Dialog内部
<FormProvider {...formMethods}>
  <YourStepperForm />
</FormProvider>

第二步：在子步骤组件中监听编辑数据并重置 #

import { useFormContext } from "react-hook-form";
import { useEffect } from "react";

const StepOne = ({ editItem }) => {
  const { reset } = useFormContext();

  useEffect(() => {
    if (editItem) {
      reset(editItem);
    }
  }, [editItem, reset]);

  // 你的Controller表单组件
  return (
    <Controller
      name="stateName"
      control={useFormContext().control}
      rules={{ required: true }}
      render={({ field: { onChange, value } }) => (
        <TextField
          required
          label="stateName"
          variant="standard"
          onChange={onChange}
          value={value}
          fullWidth
          error={!!useFormContext().errors.stateName}
          helperText={useFormContext().errors.stateName ? "Pflichtfeld" : null}
        />
      )}
    />
  );
};

3. 关键注意事项 #

• 确保Controller的name属性与编辑数据的字段名完全一致（比如编辑数据有stateName字段，Controller的name必须是stateName）
• 不要在Dialog未挂载时调用setValue或reset，因为此时表单组件还未渲染，无法接收值
• 新增和编辑共用表单时，关闭Dialog务必重置表单为空，避免状态污染

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