React Native切换page状态时useState存储的输入值异常清空

出现输入内容清空的核心原因有两个：

1. 你当前是通过条件渲染（类似page === 1 ? <TextInput .../> : <TextInput .../>）控制输入框显示，切换页面时旧输入框会被卸载、新输入框会被重新挂载，TextInput组件内部存储的临时输入内容会随组件卸载直接销毁。
2. 你声明了username、password状态，但没有把状态和TextInput做双向绑定，当前TextInput属于非受控组件，输入的内容没有同步到外层组件的state中，组件重挂时没有可以恢复的数据源。

方案1：单实例输入框动态绑定属性（推荐） #

全程只保留一个TextInput组件，根据page状态动态切换它的绑定值、提示文案、输入配置，从根源避免组件卸载重挂的问题，参考代码：

// page初始值给明确的页码，避免空值判断异常
const [page,setPage] = useState(1)
const [username,setUsername] = useState("")
const [password,setPassword] = useState("")

{/* 唯一的TextInput实例 */}
<TextInput
  value={page === 1 ? username : password}
  onChangeText={page === 1 ? setUsername : setPassword}
  placeholder={page === 1 ? "enter user name" : "enter password"}
  secureTextEntry={page === 2}
  // 其余通用样式、配置统一写在这里
/>

{/* 底部按钮区域固定渲染即可 */}
<View>
  <Button
    title="上一步"
    disabled={page === 1}
    onPress={() => setPage(prev => prev - 1)}
  />
  <Button
    title="下一步"
    disabled={page === 2}
    onPress={() => setPage(prev => prev + 1)}
  />
</View>

这种写法输入内容会实时同步到对应的state中，无论怎么切换页码，内容都不会丢失。

方案2：多实例条件渲染补全绑定和key #

如果业务场景必须拆成两个独立的TextInput做条件渲染，需要给每个输入框加唯一key标识，同时补全value和变更事件的绑定，组件重挂时会直接从外层state读取之前存储的输入值，参考代码：

{page === 1 ? (
  <TextInput
    key="username_input"
    value={username}
    onChangeText={setUsername}
    placeholder="enter user name"
  />
) : (
  <TextInput
    key="password_input"
    value={password}
    onChangeText={setPassword}
    placeholder="enter password"
    secureTextEntry
  />
)}

不建议用display: 'none'这类样式控制显隐规避问题，这种方式会让两个输入框的配置状态串扰，比如密码页的密文属性可能带到用户名页，引出新的异常。

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