如何将redux-form库的initialValue注入<Field>组件实现编辑表单数据回显

看起来你已经把历史数据正确获取并同步到Redux状态里了，问题的核心在于redux-form需要通过initialValues来初始化表单字段，而你还没把拿到的myStore数据传递给表单的初始化配置。

关键修复步骤： #

1. 在mapStateToProps中返回initialValues
   redux-form会使用initialValues来填充对应名称的表单字段，结合你已经设置的enableReinitialize: true，当myStore数据更新时，表单会自动重新初始化并加载最新值。

   修改你的mapStateToProps：

   const mapStateToProps = (state) => {
     return {
       myStore: state.storeReducer.myStore,
       initialValues: state.storeReducer.myStore // 把myStore作为初始化值传递给表单
     }
   }
   

2. 确保自定义renderField组件正确处理input属性
   你的renderField组件需要正确展开redux-form传递的input对象（里面包含value、onChange等核心属性），这样字段才能显示值并响应编辑。如果你的renderField还没这么做，参考示例：

   const renderField = ({ input, type }) => (
     <input {...input} type={type} />
   )
   

   若你的renderField已经实现了这一步，可以跳过。

3. 修正Reducer初始状态（可选但推荐）
   你的Reducer初始状态设为数组[]，但后续返回的是对象，这会导致状态结构不一致。建议把初始状态改为对象：

   export default function (state = { myStore: undefined }, action) {
     switch (action.type) {
       case EDIT_STORE_FIELDS:
         return {
           ...state,
           myStore: action.data,
         }
       default:
         return state;
     }
   }
   

完整修改后的组件代码片段： #

class UsersForm extends Component {
  render() {
    const { handleSubmit, pristine, reset, submitting, t, myStore } = this.props;
    if(!myStore) { // 更友好的空值判断
      return <div>Loading store data...</div>; // 建议显示加载状态而非返回false
    }
    return (
      <form className="form" onSubmit={handleSubmit}>
        <div className="form__form-group">
          <span className="form__form-group-label">MY BUSINESS</span>
          <div className="form__form-group-field">
            <Field name="businessname" component={renderField} type="text" />
          </div>
        </div>
        <ButtonToolbar className="form__button-toolbar">
          <Button color="primary" type="submit">SAVE</Button>
        </ButtonToolbar>
      </form>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    myStore: state.storeReducer.myStore,
    initialValues: state.storeReducer.myStore
  }
}

export default reduxForm({
  form: 'vertical_form_validation',
  validate,
  enableReinitialize: true // 已正确开启，确保数据更新时表单重新初始化
}, mapStateToProps)(transHook(UsersForm));

为什么这样能解决问题？ #

• enableReinitialize: true告诉redux-form，当initialValues发生变化时，重新初始化表单内容。
• 把myStore赋值给initialValues后，redux-form会自动将myStore.businessname对应到name="businessname"的Field组件上。
• 只要renderField正确使用input对象，字段就会显示对应的值并支持编辑操作。

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