点击同路由Link组件时Redux-form表单清空问题排查

咱们来拆解你遇到的核心问题：点击同一路由的Link后表单清空，主要原因集中在Redux状态映射匹配和React Router导航时组件生命周期触发逻辑这两个方向，下面逐一分析并给出解决办法：

1. 先排查Redux状态映射的笔误 #

看你的Reducer和mapStateToProps代码，存在一个明显的字段不匹配：

• 在Profile reducer中，获取数据成功后你更新的是state.profile字段：

  case FETCH_DATA_SUCCESS:
    return { ...state, profile: action.payload };
  

• 但在mapStateToProps中，你却取了state.profile.data：

  function mapStateToProps(state) {
    return {
      initialValues: state.profile.data // 这里应该是state.profile.profile！
    };
  }
  

你提到首次加载正常，可能是写代码时的笔误（比如Reducer里实际是data而非profile），但这个点一定要确认——如果initialValues的来源路径错误，后续任何操作都会导致表单状态异常。

2. React Router导航同一路由时的组件生命周期问题 #

React Router v4在导航到同一个路由时，默认不会卸载/重新挂载组件，只会更新组件props。这意味着Profile组件的componentDidMount只会执行一次，后续点击Link时不会重新触发fetchData。而你遇到的表单清空，大概率是表单的Redux状态被意外重置，或者initialValues没有被正确应用。

解决方案一：监听路由变化，手动触发表单初始化 #

使用withRouter高阶组件给Profile注入路由信息，然后在componentDidUpdate中监听location变化，按需重新拉取数据或初始化表单：

首先给Profile组件包裹withRouter：

import { withRouter } from 'react-router-dom';

// ... 其他代码

export default withRouter(connect(mapStateToProps,{ fetchData })(Profile));

然后在Profile组件中添加生命周期方法：

componentDidUpdate(prevProps) {
  // 检测路由是否发生变化（比如点击同一路由的Link）
  if (this.props.location !== prevProps.location) {
    // 重新拉取数据（如果需要最新数据）
    this.props.fetchData();
    // 或者直接初始化表单（需在ProfileForm中引入redux-form的initialize action）
    // this.props.initialize(this.props.initialValues);
  }
}

解决方案二：强制路由重新挂载组件 #

给Route组件添加key属性，让React每次导航时都创建新的组件实例，从而触发componentDidMount：

// Main.js
<Route path='/profile' component={Profile} key={window.location.pathname + window.location.search} />

这样每次点击Link时，组件都会重新挂载，componentDidMount会再次执行，重新获取数据并初始化表单。

解决方案三：利用组件key触发ProfileForm重新初始化 #

你已经设置了enableReinitialize: true，但如果希望每次进入路由都强制重置到initialValues，可以给ProfileForm加上和路由相关的key：

// Profile.js的render方法
return <ProfileForm initialValues={this.props.initialValues} key={this.props.location.key} />

每次路由变化时，ProfileForm都会重新渲染，触发表单的初始化逻辑。

3. 额外检查点 #

• 确认submitData action是否会意外清空Redux中的profile数据：你的Reducer中SUBMIT_DATA_SUCCESS会把提交的values设置为state.profile，要确保提交的values结构和initialValues完全一致；
• 检查redux-form的form名称唯一性：你用了form: 'ProfileForm'，确保没有其他组件使用同一个form名称，否则会导致状态冲突。

试试上面的方案，应该能解决你点击Link后表单清空的问题。

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