UseState 未使用 TextInput 正确更新 |反应

Question

所以，如果这是重复的，我很抱歉，但是我已经阅读了很多帖子并且找不到解决我的问题的方法，现在我在这里直接寻求帮助。
让我们解释一下这个问题，我的代码中有一个 Modal，它有一个 TextInput 和一个 Button。当 TextInput 中的文本发生更改并且单击 Button 时，我需要更新一个状态，我需要对文本做一些事情（但这对问题本身，所以让我们假设它是console.log)。如果我打开 Modal 并在 TextInput 中写一些东西，它会将文本保存在状态中，但是当我单击 Button 时它什么也不打印。但是当我关闭 Modal 并再次打开它时，如果我点击 Button 而不写任何内容，它会打印我之前写的内容。比如：

1. 打开模态
2. 在 TextInput 中写“Hello”
3. 单击按钮。它什么也不打印
4. 关闭模态
5. 再次打开模态
6. 单击按钮。它打印Hello

我尝试了很多东西，但似乎都没有奏效，如果解释令人困惑，我很抱歉。

---

下面是一些示例代码：

    function Example(){
        const [modalVisibility, setModalVisibility] = useState(false)
        const [text, setText] = useState()

        return(
            <SafeAreaView>
                <Modal
                    transparent={true}
                    visible={modalVisibility}
                    onRequestClose={() => {
                        setModalVisibility(false)
                    }}>
                    <View>
                        <Button title="Close Modal" onPress={() => {
                            setModalVisibility(false)// closes the modal
                        }}/>
                        <TextInput 
                            placeholder="Type..."
                            maxLenght={20}
                            onChangeText={(t) => {
                                setText(t) // updates the state in theory
                            }}
                        />
                        <Button title="Click Me" onPress={() => {
                            console.log(text) // prints the state
                        }}/>
                    </View>
                </Modal>
            </SafeAreaView>
        )
    }

---

我尝试过的一些事情：

我尝试将onChangeText={...} 更改为异步函数并在setText(t) 中放置一个等待，但它不起作用。

我还尝试将onChangeText={...} 更改为onChange={e => setText(e.target.value)}，但它返回了一个未定义的值

我在其他帖子中看到有人说要使用useEffect(() => {...}, [text])，但我不知道如何在我的情况下使用它。但是我在尝试这个时注意到的一件事是，如果我在 useEffect 内写一个 console.log(text) 并打印实际文本，但即使在那之后按钮仍然打印旧文本。

---

如果您能帮助我解决这种情况，我将非常感激和高兴。感谢阅读:)

Answer 1

A.给你的状态一个合法的初始值 const [text, setText] = useState(””)

B.您的 maxLength 属性有错字。

C.为您的 TextInput 提供一个 value 属性： 值={文本}

D.将您的 onChange 更改为： onChangeText={t => setText(t)}

Answer 2

这里的问题是事件处理程序上有一个闭包

onPress={() => { console.log(text) // prints the state }}

这里的文本值绑定到状态中最初设置的值，因此状态更新不会得到兑现，因为闭包是在前一个值上的。

您应该像这样将回调传递给 onPress 处理程序。传递的处理程序可以调用console.log 函数。

const onPressHandler = () => {
   console.log(text);
}


<Button title="Click Me" onPress={onPressHandler} />

Answer 3

试试这个：

const updateText = e =>{
setText(e.target.value)
}

<TextInput 
       placeholder="Type..."
       maxLenght={20}
       onChange={(e) => updateText(e)}
       name="textData"
/>