Redux Form初始化值未显示求助：React Router跳转后表单预填失效

我之前也碰到过类似Redux Form + React Router场景的坑，结合你描述的情况和代码，咱们一步步排查解决：

1. 先排查表单名称冲突问题 #

你在编辑页和创建页的表单都用了form: "AttributeForm"这个名称，而React Router跳转同类型组件时会复用组件实例，这就导致Redux Form的旧表单状态（编辑页的值）没被清空，即便你传了新的initialValues，也会被旧状态覆盖。

解决办法：

• 给创建页的表单指定独一无二的form名称，比如：

  // 创建页的表单配置
  export default reduxForm({
    form: "AttributeFormCreate", // 和编辑页区分开
    touchOnBlur: false,
    enableReinitialize: true
  })(AttributeForm)
  

• 或者在克隆按钮点击时手动清空编辑页的表单状态：

  import { reset } from 'redux-form'
  
  // 克隆按钮的点击处理逻辑
  const handleClone = () => {
    // 先重置编辑页的表单状态
    dispatch(reset("AttributeForm"))
    // 再跳转到创建页并传递克隆值
    history.push('/attributes/create', { cloneValues: this.props.initialValues })
  }
  

2. 检查Connect和Redux Form的包装顺序 #

你的代码里是先connect再用reduxForm包装组件，这个顺序可能有问题——Redux Form需要先注入表单相关的props，connect才能正确获取到表单状态（比如你用的formValueSelector）。

调整为正确顺序：

const selector = formValueSelector("AttributeForm")
const mapStateToProps = state => ({
  sourcesArray: getDataSourcesArrayForSelect(state, true),
  dataType: selector(state, "data_type")
})

// 先包装reduxForm，再进行connect
const FormWithRedux = reduxForm({
  form: "AttributeForm",
  touchOnBlur: false,
  enableReinitialize: true
})(AttributeForm)

export default connect(mapStateToProps)(FormWithRedux)

3. 手动触发表单初始化（应对组件复用） #

因为React Router复用组件实例，componentDidMount不会重新执行，即便开了enableReinitialize，也可能因为浅比较没检测到initialValues变化而不触发重新初始化。

解决办法：在创建页组件里监听initialValues变化，手动调用initialize action：

import { initialize } from 'redux-form'

class CreateAttributePage extends Component {
  componentDidUpdate(prevProps) {
    // 当克隆值变化时，手动初始化表单
    if (this.props.cloneValues !== prevProps.cloneValues) {
      this.props.initialize(this.props.cloneValues)
    }
  }

  render() {
    return <AttributeForm />
  }
}

// 把initialize action映射到组件props
export default connect(null, { initialize })(CreateAttributePage)

4. 确保initialValues是不可变的 #

如果你的initialValues是引用类型（对象），要确保传递给创建页表单的是新的对象引用——Redux Form的enableReinitialize是浅比较，同一个引用会被认为值没变化。

传递时创建新副本：

// 跳转时传递克隆值，用扩展运算符创建新对象
history.push('/attributes/create', { cloneValues: { ...this.props.initialValues } })

先试试前两个方案，这是最常见的导致表单不预填的原因，应该能解决你的问题。

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