React Native单个TextInput输入异常：内容闪显即消失求助

核心问题原因 #

你的手机号输入框代码存在属性使用错误：React Native的TextInput组件没有setValue这个属性，正确用于更新输入值的属性是onChangeText。

当你给TextInput绑定value={phoneNumber}时，组件成为受控组件，必须通过onChangeText接收输入事件并更新对应state。错误使用setValue会导致输入事件无法触发state更新，组件每次渲染时value都会回到初始空字符串，因此输入内容会闪显后立即消失。

修复代码 #

将手机号输入框的setValue替换为onChangeText即可：

<TextInput 
    placeholder='###-###-####'
    value={phoneNumber}
    onChangeText={setPhoneNumber}
    style={styles.phoneNumber}
/>

额外检查点（若修复后仍有问题） #

• 确认没有其他逻辑（如表单重置、父组件重传props）意外重置phoneNumber的state值
• 检查组件是否被不必要地频繁重渲染（如父组件无意义的state更新导致MyProfile组件重复渲染）
• 验证TextInput的样式是否存在遮挡或层级问题（该情况极少导致输入闪显）

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