React Final Form组件内设置状态失效的问题及解决方法

兄弟，你的问题根源在于误解了React Final Form的工作机制——它是一个受控表单库，会自己接管所有字段的状态管理，你强行把组件state和Field绑定的操作，不仅没用，还破坏了Final Form的内部逻辑。我来给你拆解问题，然后直接上修复后的代码：

问题出在哪？ #

1. Field的value属性不能自己传：你给每个Field都加了value={this.state.firstName}这类绑定，这会覆盖Final Form内部维护的字段值，导致状态不同步。
2. Field的onChange不是给你用的：Final Form的Field组件里的onChange是内部用来更新表单状态的钩子，你自己传的onChange回调根本不会被触发，这就是setUserDetails没被调用的原因。
3. 没必要自己维护表单state：Final Form会自动收集所有字段值，在提交时直接传给你，完全不需要你手动用setState存一遍。

修复方案 #

步骤1：移除组件内的表单状态 #

删掉你的state里所有和表单字段相关的属性，因为Final Form会帮你管：

// 删掉这段冗余状态
state = {
 firstName: '',
 lastName: '',
 emailAddress: '',
 password: '',
 confirmPassword: '',
}

步骤2：修改showConsentForm接收表单值 #

Final Form的onSubmit会自动把表单的values对象传过来，直接用就行：

showConsentForm = (formValues) => {
  // 这里直接用formValues就能拿到所有字段值了！
  console.log('用户输入：', formValues.firstName, formValues.emailAddress);
  // 你的后续逻辑，比如跳转到同意页等
}

步骤3：清理Field组件的冗余属性 #

删掉所有Field上的value和onChange，让Final Form完全接管字段状态：
比如原来的冗余写法：

<Field 
  type="text" 
  value={this.state.firstName} 
  component={InputType} 
  validate={composeValidators(required, fieldLength(2, 60))} 
  placeholder={translate('register.firstNamePlaceholder')} 
  name="firstName" 
  onChange={(e) => { /* 你的无效回调 */ }}
/>

改成简洁的Final Form原生写法：

<Field 
  type="text" 
  component={InputType} 
  validate={composeValidators(required, fieldLength(2, 60))} 
  placeholder={translate('register.firstNamePlaceholder')} 
  name="firstName" 
/>

步骤4：修复InputType组件 #

InputType里不要用外部传的value，直接用Final Form提供的input.value——你已经展开了{...input}，里面已经包含了正确的value和onChange，不需要额外处理：

const InputType = ({ input, type, placeholder, meta: { touched, error }, }) => (
  <React.Fragment>
    {/* 删掉单独的value属性，{...input}已经包含了所有表单控制逻辑 */}
    <input {...input} type={type} placeholder={placeholder} className={(error) ? 'hw-input--error hw-input' : 'hw-input' }/>
    { touched && error && <span className="hw-error"> {error} </span> }
  </React.Fragment>
)

步骤5：处理复选框的状态（可选） #

如果需要把acceptTerms复选框也纳入Final Form管理，改成Field组件形式，这样提交时能直接从formValues里拿到它的值：

<Field 
  type="checkbox" 
  name="acceptTerms" 
  component={({input}) => (
    <React.Fragment>
      <input {...input} type="checkbox" />
      <i className="hw-checkbox__indicator"></i>
    </React.Fragment>
  )}
/>

修复后的完整代码 #

import {Form, Field} from 'react-final-form';
class UserDetails extends Component {
  // 已移除表单相关state

  showConsentForm = (formValues) => {
    // 现在这里能正常获取所有字段值了！
    console.log('表单提交值：', formValues);
    // 你的后续业务逻辑
  }

  render () {
    const {t: translate} = this.props;
    return (
      <Form onSubmit={this.showConsentForm} render={({handleSubmit, invalid}) => (
        <form onSubmit={handleSubmit}>
          {this.state.showDetailsPage && <div>
            <div className="hw-block hw-block--mb">
              <h2>{translate('register.heading')}</h2>
            </div>
            <div className="hw-block hw-block--mb">
              <h4>{translate('register.detailsPageText')}</h4>
            </div>
            <p>{translate('register.firstName')}</p>
            <div className="hw-block hw-block--mb-smaller">
              <Field 
                type="text" 
                component={InputType} 
                validate={composeValidators(required, fieldLength(2, 60))} 
                placeholder={translate('register.firstNamePlaceholder')} 
                name="firstName" 
              />
            </div>
            <p>{translate('register.surname')}</p>
            <div className="hw-block hw-block--mb-smaller">
              <Field 
                type="text" 
                placeholder={translate('register.surnamePlaceHolder')} 
                component={InputType} 
                validate={composeValidators(required, fieldLength(2, 60))} 
                name="lastName" 
              />
            </div>
            <p>{translate('register.email')}</p>
            <div className="hw-block hw-block--mb-smaller">
              <Field 
                type="email" 
                placeholder={translate('register.emailPlaceHolder')} 
                component={InputType} 
                validate={composeValidators(required, validateEmail)} 
                name="emailAddress" 
              />
            </div>
            <p>{translate('register.password')}</p>
            <div className="hw-block hw-block--mb-smaller">
              <div className="hw-password" data-hw-password>
                <Field 
                  type="password" 
                  placeholder={translate('register.passwordPlaceHolder')} 
                  component={InputType} 
                  validate={required} 
                  name="password" 
                />
              </div>
            </div>
            <p>{translate('register.confirmPassword')}</p>
            <div className="hw-block hw-block--mb-smaller">
              <div className="hw-password" data-hw-password>
                <Field 
                  type="password" 
                  component={InputType} 
                  placeholder={translate('register.confirmPasswordPlaceHolder')} 
                  validate={required} 
                  name="confirmPassword" 
                />
              </div>
            </div>
            <div className="hw-block hw-block--mb-smaller">
              <label className="hw-checkbox">
                <p className="hw-text-small">{translate('register.accept')} <a target="_blank" href="https://abcd/etc" className="hw-link">{translate('register.terms')}</a> {translate('register.conditions')} </p>
                <Field 
                  type="checkbox" 
                  name="acceptTerms" 
                  component={({input}) => (
                    <React.Fragment>
                      <input {...input} type="checkbox" />
                      <i className="hw-checkbox__indicator"></i>
                    </React.Fragment>
                  )}
                />
              </label>
            </div>
            <div className="hw-block hw-block--mb-smaller">
              <button className="hw-button hw-button--primary" disabled={invalid} >{translate('register.continue')}</button>
              <button className="hw-button hw-button--secondary secondary-button-margin" onClick={homePage}>{translate('register.cancel')}</button>
            </div>
          </div>}
        </form>)} />
    )
  }
}

const InputType = ({ input, type, placeholder, meta: { touched, error }, }) => (
  <React.Fragment>
    <input {...input} type={type} placeholder={placeholder} className={(error) ? 'hw-input--error hw-input' : 'hw-input' }/>
    { touched && error && <span className="hw-error"> {error} </span> }
  </React.Fragment>
)

额外提示 #

• 如果需要在提交前实时获取字段值，可以在Form的render prop里解构form对象，用form.getValues('firstName')获取单个字段值。
• 永远不要试图把Final Form的字段和组件state绑定，这会让两个状态源冲突，导致各种奇怪的bug。

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