React中TextInput绑定useState状态更新异常问题求助

问题原因 #

你遇到的是React Native受控组件配置缺失+闭包陷阱的组合问题，核心原因有2点：

1. TextInput作为受控组件使用时，必须显式绑定value属性到对应的state，你当前的代码只写了onChangeText更新state，没有把state回绑到TextInput，导致组件内部值和state没有强同步，点击按钮读取的始终是Modal首次渲染时缓存的初始state空值。
2. Modal的渲染机制会缓存首次打开时的函数闭包，你上次输入更新的state要等到Modal下次重新打开、完成新的渲染周期后，才会被新的闭包读取到，这就是你第二次打开Modal能打印出上次内容的原因。
   另外你的代码里存在拼写错误：maxLenght应为maxLength，该错误不影响本次核心逻辑但会导致长度限制不生效。

修复方案 #

直接给TextInput补充value属性绑定即可，可选补充关闭Modal时清空输入内容的逻辑，避免下次打开保留上次输入，修复后代码如下：

import { useState } from 'react';
import { SafeAreaView, Modal, View, Button, TextInput } from 'react-native';

function Example(){
    const [modalVisibility, setModalVisibility] = useState(false)
    // 给state添加初始空字符串，避免undefined异常
    const [text, setText] = useState('')

    return(
        <SafeAreaView>
            <Modal
                transparent={true}
                visible={modalVisibility}
                onRequestClose={() => {
                    setModalVisibility(false)
                    // 可选：关闭Modal时清空输入内容
                    setText('')
                }}>
                <View>
                    <Button title="Close Modal" onPress={() => {
                        setModalVisibility(false)
                        // 可选：关闭Modal时清空输入内容
                        setText('')
                    }}/>
                    <TextInput 
                        placeholder="Type..."
                        maxLength={20} // 修正拼写错误
                        value={text} // 新增：绑定state到TextInput的value属性
                        onChangeText={(t) => {
                            setText(t)
                        }}
                    />
                    <Button title="Click Me" onPress={() => {
                        console.log(text) // 现在可以实时打印最新输入内容
                    }}/>
                </View>
            </Modal>
            {/* 补充打开Modal的触发按钮，原代码遗漏 */}
            <Button title="Open Modal" onPress={() => setModalVisibility(true)} />
        </SafeAreaView>
    )
}

为什么之前的尝试没有生效 #

• setText是React的状态更新函数，本身没有返回Promise，添加await没有任何作用
• React Native的TextInput和Web端的input元素不同，onChange事件返回的原生事件对象不存在e.target.value属性，只有onChangeText会直接返回输入的文本内容
• useEffect的依赖项包含text，每次text变化都会重新执行，拿到的是最新的闭包值，而你原来的按钮点击回调在Modal首次渲染时就被缓存，没有和最新的state绑定，所以读不到实时值

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