UseState 不能正確更新 TextInput | 反應

Question

所以，很抱歉，如果這是重復的，但我已經閱讀了很多帖子，但找不到解決我的問題的方法，現在我在這里直接尋求幫助。
讓我們解釋一下這個問題，我的代碼中有一個Modal ，它有一個TextInput和一個Button 。 我需要在TextInput 中的文本更改時更新 State 並且當我單擊Button我需要對文本做一些事情（但這對問題本身並不重要，所以讓我們假設它是一個console.log ）。 如果我打開模態並在TextInput 中寫一些東西，它會將文本保存在狀態中，但是當我單擊按鈕時，它什么也不打印。 但是，當我關閉模態並再次打開它時，如果我單擊按鈕而不寫任何內容，它會打印我之前寫的內容。 所以像：

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)放置一個 await 但它不起作用。

我還嘗試將onChangeText={...}更改為onChange={e => setText(e.target.value)}但它返回了一個未定義的值

我在其他帖子中看到有人說要使用useEffect(() => {...}, [text])但我不知道如何在我的情況下使用它。 但是我在嘗試時注意到的一件事是，如果我在useEffect寫了一個console.log(text)並且它打印了實際的文本，但即使在那之后按鈕仍然打印舊的。

---

如果你能幫助我解決這種情況，我將非常感激和高興。 謝謝閱讀 ：）

Answer 1

這里的問題是事件處理程序上有一個閉包

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

這里的文本值綁定到最初在狀態中設置的值，因此狀態更新沒有得到遵守，因為閉包是在前一個值上。

Answer 2

試試這個：

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

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

Answer 3

我創建了一個Expo 。 它似乎有效：