使用useSelector时输入框输入字符后失焦，原因是什么？

在父子组件结构中使用useSelector后输入框失焦，常见原因及对应解决方式如下：

• 子组件被重复创建：如果子组件的定义写在父组件内部（比如父组件的渲染函数里），每次父组件因Redux状态更新重新渲染时，都会生成一个全新的子组件构造函数。React会认为这是一个新组件，卸载旧的子组件实例、挂载新实例，导致输入框失去焦点。
  解决：将子组件定义移到父组件外部，确保组件引用稳定。

• useSelector返回不稳定的引用：如果useSelector中的选择器每次都返回新的对象/数组（比如直接使用{...state.data}或state.data.slice()这类返回新引用的操作），会导致父组件频繁触发重渲染。若子组件依赖这些不稳定的props，也会跟着重复渲染，极端情况下引发组件重建导致失焦。
  解决：

  1. 使用Redux提供的shallowEqual作为useSelector的第二个参数，浅比较状态值，避免不必要的重渲染：

  import { shallowEqual, useSelector } from 'react-redux';
  const formData = useSelector(state => state.formData, shallowEqual);
  

  2. 仅选择需要的具体字段，而非返回整个对象的拷贝：

  const username = useSelector(state => state.formData.username);
  

• key值不稳定：如果子组件的key属性使用了随机值、每次变化的索引等不稳定的值，React会频繁销毁和重建组件实例，引发输入框失焦。
  解决：使用固定、唯一且稳定的值作为key（比如数据的ID）。

• 受控组件状态绑定异常：若输入框的value绑定的状态更新逻辑存在问题（比如状态更新后返回了与之前完全无关的新值），也可能导致输入框失去焦点。
  解决：检查onChange事件的状态更新逻辑，确保value绑定的是正确的Redux状态，且更新过程中状态值的变化符合预期。

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