为何表单值未与value属性绑定？提交时传入空值

嘿，我来帮你搞定这个问题！你遇到的情况是：从其他页面带过来的预填充值能在页面上正常显示，但点击提交按钮时这些值却变成了空的。这是因为你直接给Text组件添加了value属性，但没把这些值纳入表单库（这里是基于ReformContext的表单系统）的状态管理中，导致表单提交时根本没捕获到这些值。

问题根源 #

你使用的ReformContext和Form组件（推测是react-reform这类表单库）是靠自身的状态系统来管理所有表单数据的。直接给字段组件设置value，只会让它在页面上显示出来，但不会同步到表单的内部状态里。所以当你触发提交时，handleSubmit拿到的data对象自然就没有这些预填充的值了。

解决方案 #

你需要通过表单的初始值配置来传入预填充数据，而不是直接给字段组件传value。具体步骤如下：

1. 整理预填充的初始值对象
   从this.props.userInfo.account.user中提取需要预填充的字段，构建一个初始值对象：

   const initialValues = {
     OrganizationName: this.props.userInfo.account.user?.organizationName || '',
     EmailId: this.props.userInfo.account.user?.emailId || '',
     // 如果还有其他需要预填充的字段，也可以添加到这里
   };
   

2. 将初始值传入Form组件
   在Form组件上添加initialValues属性，把上面的对象传进去，同时移除Text组件上的value属性：

   <ReformContext themes={{ default: defaultTheme }} validations={defaultValidations}>
     <Form onSubmit={this.handleSubmit} initialValues={initialValues}>
       <ToastContainer />
       <button type='submit' className='Save-Continue-Button'>
         {Resource.SaveNContinue}
       </button>
       <div className='tab-content col-lg-10 col-lg-offset-1'>
         <h2> {Resource.HEAD_RegisterCustomerHeader} </h2>
         <hr />
         <div className='form-horizontal'>
           <div className='form-group'>
             <Text name='FirstName' isRequired placeholder={Resource.PH_EnterFirstName} />
             <Text name='LastName' isRequired placeholder={Resource.PH_EnterLastName} />
             <Text name='OrganizationName' isRequired placeholder={Resource.PH_EnterOrganizationName} />
             <Text name='EmailId' isRequired isEmail placeholder={Resource.PH_EnterEmail} />
             <Text name='PhoneNo' isRequired hasMaxlength={10} hasMinlength={10} placeholder={Resource.PH_EnterPhoneNo} />
           </div>
         </div>
       </div>
     </Form>
   </ReformContext>
   

3. 可选：处理props更新的场景
   如果this.props.userInfo可能在组件挂载之后才更新，那你需要监听这个props的变化，同步更新表单状态。在类组件中可以用componentDidUpdate实现：

   constructor(props) {
     super(props);
     this.formRef = React.createRef(); // 创建表单的ref
   }
   
   componentDidUpdate(prevProps) {
     // 当userInfo发生变化时，更新表单值
     if (prevProps.userInfo !== this.props.userInfo) {
       const newValues = {
         OrganizationName: this.props.userInfo.account.user?.organizationName || '',
         EmailId: this.props.userInfo.account.user?.emailId || '',
       };
       this.formRef.current.setValues(newValues); // 调用表单的setValues方法更新状态
     }
   }
   

   记得给Form组件添加这个ref：

   <Form ref={this.formRef} onSubmit={this.handleSubmit} initialValues={initialValues}>
   

额外的小修复 #

你的addCustomer函数里的API请求写法有问题：

axios.post(json.map(function (api) { return api.RegisterCustomer; }), { ... })

json.map会返回一个数组，但axios.post的第一个参数需要是字符串类型的URL。你应该直接获取对应的API地址，比如：

// 假设json是包含API地址的对象，直接使用json.RegisterCustomer
axios.post(json.RegisterCustomer, {
  FirstName: customer.FirstName,
  LastName: customer.LastName,
  OrganizationName: customer.OrganizationName,
  EmailId: customer.EmailId,
  PhoneNo: customer.PhoneNo
})

这样调整之后，预填充的值就能被表单正常捕获，提交时也能正确传参啦！

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