UseState没有正确更新TextInput | React

Question

所以，我很抱歉，如果这是一个重复，但我已经读了很多帖子，找不到一个解决我的问题，现在我在这里直接寻求一些帮助。
让我们来解释一下这个问题，我的代码中有一个Modal有一个TextInput和按钮． 当TextInput中的文本时，我需要更新状态当我点击按钮我需要对文本做一些事情(但这对问题本身并不重要，所以让我们假设它是一个console.log)。如果我打开Modal然后在TextInput中写一些东西它将文本保存在当前状态但是当我点击按钮时它什么也不打印。但是当我关闭Modal然后再打开，如果我点击按钮不写任何东西，它打印我之前写的东西。就像:

1. 打开模式
2. 写"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"
/>