React Native <TextInput> 自定义6位验证码输入框显示值与状态不同步

问题根因 #

你观察到的两个异常——非法按键直接显示、状态正确但输入框不同步、输入内容渲染错位——本质上都是两个基础实现bug导致的，和受控组件本身的机制没有关系：

• 状态更新触发被阻断
  你在handleForm里写的let digitsArray = digits是引用赋值，后续对digitsArray的修改本质是直接改动React state指向的原始数组。调用setDigits(digitsArray)时，因为传入的数组和原state的引用完全一致，React的浅比较会判定状态没有变化，直接跳过组件重渲染流程。
  没有重渲染的前提下，每个TextInput绑定的value={digits[index]}永远不会被重新计算、同步到原生输入层。此时原生输入框会自主响应用户按键，把非法字符、输入的数字直接渲染在当前聚焦的输入框里，完全绕过你写的状态同步逻辑。
• ref数组生命周期不匹配
  你写的textInputRefs = []是组件函数作用域内的普通变量，没有做持久化存储。每次组件函数执行时，这个数组都会被重置为空数组，ref的绑定时序、数组的引用和组件渲染流程不同步，导致逻辑计算的空位索引、focus跳转位置和实际输入框的位置错位。

具体修改步骤 #

1. 替换状态更新的引用写法，把let digitsArray = digits改成let digitsArray = [...digits]，确保每次修改状态后生成全新的数组引用，让React能正常触发重渲染，把最新的digits值同步到对应输入框上。
2. 用useRef持久化ref数组，把组件内的const textInputRefs = []改成const textInputRefs = useRef([])，所有对ref数组的读取、赋值都通过.current访问（比如textInputRefs.current[trueIndex].focus()），保证ref数组的引用在组件生命周期内不会被重置。
3. 补充非数字按键的拦截逻辑：在onKeyPress回调中，遇到非数字、非Backspace的按键时直接拦截默认行为，避免原生层先把非法字符渲染出来导致的闪烁。
4. 你原来写的查找首位空位的逻辑本身是正确的，只要修好状态重渲染的链路，用户在非首位空位输入的内容就会正确显示在最靠前的空输入框里，不会再出现渲染错位。

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