javascript - UseState 未使用 TextInput 正确更新

问题描述

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

打开模态
在 TextInput 中写“Hello”
单击按钮。它什么也不打印
关闭模态
再次打开模态
单击按钮。它打印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={...}为 async 函数并放入 awaitsetText(t)但它不起作用。

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

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

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

标签： javascriptreact-nativeexpostatetextinput

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

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

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

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

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


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

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

问题描述

解决方案

推荐阅读