react-admin中TextInput二次搜索后state更新但展示值未同步如何解决

问题原因 #

• react-admin的SimpleForm底层基于react-hook-form实现，你给TextInput传的defaultValue仅在表单初始化时生效一次，后续state更新不会触发输入框值重渲染，你代码里的defaulValue还存在拼写错误（少了字母t，正确为defaultValue），就算修正拼写也解决不了多次更新的问题。
• TextInput默认和react-admin内部的表单状态绑定，你外部传的value属性会被内部表单状态覆盖，所以不会生效。
• 自己额外维护useState存表单字段值会导致两份状态不同步，不符合react-admin的表单设计规范。

解决方法 #

直接用react-admin暴露的useFormContext钩子拿到表单实例的setValue方法，直接修改表单内部的状态，所有绑定对应source的TextInput会自动同步更新，不需要自己维护useState，也不需要改用原生MUI组件。

完整修改后代码 #

import React, { useCallback } from "react";
import { Edit, TextInput, SimpleForm, useFormContext } from 'react-admin';
import ProcesoSearchButton from "../proceso/ProcesoBusquedaBtn"

// 封装放在SimpleForm内部的搜索组件，可访问表单上下文
const ProcesoSearchWithUpdate = ({ formClassName }) => {
  const { setValue } = useFormContext();
  const updateProceso = useCallback(async (who) => {
    // 直接更新表单对应字段，shouldDirty参数标记表单已修改可正常提交
    setValue('proceso', who.proceso, { shouldDirty: true });
    setValue('d_proceso', who.d_proceso, { shouldDirty: true });
    setValue('idProceso', who.id, { shouldDirty: true });
  }, [setValue]);

  return <ProcesoSearchButton callbackProceso={updateProceso} formClassName={formClassName}/>
}

const ProcesoEdit = props => {
  const classes = useStyles();

  return (
    <Edit {...props} title={<ProcesoStdTitle/>}>
      <SimpleForm>
        <TextInput 
          source="proceso" 
          label="N°Proceso" 
          fullWidth
          formClassName={classes.proceso} 
          inputProps={{readOnly: true}} 
          variant="filled"
        />
        <TextInput 
          source="d_proceso" 
          label="Descripción" 
          fullWidth
          formClassName={classes.d_proceso} 
          inputProps={{readOnly: true}}
          variant="filled"
        />
        {/* 替换原来的搜索按钮 */}
        <ProcesoSearchWithUpdate formClassName={classes.btnBusqueda}/>
        {/* 其余原有代码 */}
      </SimpleForm>
    </Edit>
  )
};
export default ProcesoEdit;

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