MUI TextField部分输入框单次按键后失焦问题求助

• 检查CellItem的渲染依赖：React.memo的浅比较可能没覆盖所有变化的props。打开React DevTools，对比有问题和正常的CellItem的props，看是否存在隐式依赖变化（比如父组件传递的回调函数每次渲染都新建，或者某个对象/数组props每次都是新引用）。即使item._id不变，如果其他props是动态生成的新引用，memo会失效，导致CellItem重新渲染，输入框失焦。
• 验证key的唯一性和稳定性：确认那3个有问题的item的_id是否真的唯一，有没有重复或者在渲染过程中被修改的情况。可以在渲染时打印item._id，看每次渲染的key是否一致。另外，检查父组件渲染CellItem的列表时，key是否直接绑定在CellItem上，而不是只给TextField加key——如果CellItem本身重新渲染，还是会导致输入框被卸载重建。
• 排查父组件的重渲染范围：用React DevTools的Highlight Updates功能，看输入时是否只有当前CellItem重渲染，还是父组件甚至更上层组件整体重渲染。如果父组件不必要重渲染，会带动CellItem重新渲染，即使memo也可能因为props变化触发。比如父组件的state更新范围过大，或者使用了没有依赖的useEffect导致重复渲染。
• 检查TextField的受控状态逻辑：确认有问题的输入框的value和onChange绑定是否正确。如果value的数据源在每次按键后意外变更（比如某个计算逻辑错误，导致value被重置或者指向了其他数据），会触发输入框重新渲染失焦。可以在onChange里打印新值，对比state中的数据是否和输入一致。
• 排查样式或第三方组件冲突：检查那3个CellItem是否有特殊的样式（比如自定义CSS、emotion样式）或者额外的包裹组件，可能导致DOM结构意外变更。比如某些条件渲染的逻辑，在输入时触发了DOM元素的卸载和重建，比如某个条件判断在输入后改变，导致TextField所在的DOM节点被替换。
• 测试简化版组件：把有问题的CellItem单独抽出来，去掉多余的逻辑和样式，只保留TextField和必要的props，测试是否还会失焦。如果简化后正常，再逐步加回原来的逻辑，定位到导致问题的代码片段。

内容的提问来源于stack exchange，提问作者Joseph D.