Redux-Form输入框失焦时导致另一输入框清空的问题

DevOps 小满

2026-5-27

嘿，我之前也碰到过类似Redux-Form老版本的诡异问题，结合你说的场景——返回后再进入视图才出现，blur触发时清空其他输入框，给你几个方向排查：

可能的原因与排查方案

表单字段name属性冲突/重复
这是Redux-Form里的高频坑，尤其是路由切换复用组件的场景。如果两个输入框的name不小心重复，或者组件卸载时没正确清理Redux store里的字段状态，返回再进入时，blur事件触发的action会错误更新另一个字段的值。你可以检查所有<Field>组件的name属性，确保它们在表单内唯一，且没和其他复用组件的字段名重复。
组件卸载时Redux状态残留
Redux-Form默认不会自动清理已卸载表单的状态，当你返回再进入视图时，旧的表单状态可能和新实例产生冲突。你可以在组件卸载时手动调用destroy()方法清除当前表单状态：
```
// 类组件示例
componentWillUnmount() {
  this.props.destroy();
}

// 函数组件示例
useEffect(() => {
  return () => {
    props.destroy();
  };
}, [props.destroy]);
```
注意destroy是通过reduxForm()高阶组件注入的props，要确保正确引入。
自定义blur处理逻辑的副作用
如果你给某个字段自定义了onBlur函数，检查里面是否有误操作其他字段的逻辑——比如处理A字段blur时，不小心调用change()修改了B字段的值。这种问题在组件复用、状态未重置时更容易出现。你可以用Redux DevTools查看blur触发时dispatch的action，看是否有意外的CHANGE action被触发。
Redux-Form版本的已知bug
7.3.0确实存在一些路由切换相关的状态管理问题，比如表单卸载后状态未正确清理，导致再次挂载时状态污染。如果上面的方法都没用，可以尝试升级到Redux-Form的最新稳定版本（比如v8.x，注意v8有部分API变化），或者查找7.x系列的patch版本是否修复了该问题。