React Hook Form预填任务数据异常：输入框显示[object Object]求助

1. 修正状态类型与初始化 #

你当前把tasks初始化为空字符串，但实际要存储的是任务对象，类型不匹配导致赋值后转成字符串显示[object Object]。修改状态定义：

// 若使用TypeScript，先定义任务类型（无TS可省略类型）
type Task = {
  ID: string;
  TaskName: string;
  // 其他任务字段按需添加
};

// 初始化任务状态为对象而非字符串
const [currentTask, setCurrentTask] = useState<Task>({} as Task);

2. 打开模态框时预填选中的任务数据 #

在触发打开更新模态框的逻辑中（比如点击编辑按钮时），将选中的任务数据赋值给currentTask：

// 示例：假设点击编辑按钮时触发此逻辑
const openUpdateModal = () => {
  if (selectedItems[0]) {
    setCurrentTask(selectedItems[0]);
    setVisible(true);
  }
};

3. 修正输入框的绑定逻辑 #

输入框的value要对应任务对象的TaskName字段，同时onChange要正确更新状态中的任务数据，避免类型错误：

<Input
  type="text"
  // 用空字符串兜底，避免TaskName为undefined时显示异常
  value={currentTask.TaskName || ''}
  // 合并原有任务数据，只更新TaskName字段
  onChange={(e) => setCurrentTask(prev => ({ ...prev, TaskName: e.detail.value }))}
  placeholder="Task Name"
/>

4. 调整更新接口的参数传递 #

原代码中putName变量未定义，直接使用状态中的currentTask.TaskName作为更新参数：

const { isLoading: isUpdatingTask, mutate: updateTask } = useMutation(
  (putId: string) => {
    return TaskService.update(
      putId,
      { TaskName: currentTask.TaskName }
    );
  },
  {
    onSuccess: (res) => {
      setPutResult(fortmatResponse(res));
      setVisible(false); // 更新成功后关闭模态框
    },
    onError: (err: any) => {
      setPutResult(fortmatResponse(err.response?.data || err));
    },
  },
);

5. 完善putData函数（可选） #

确保更新时传入选中任务的ID：

function putData() {
  if (selectedItems[0]) {
    updateTask(selectedItems[0].ID);
  }
}

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