Question

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

打开模态
在 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={...} 更改为异步函数并在 setText(t) 中放置一个等待，但没有成功。

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

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

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

Answer 1

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

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

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

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

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


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

Answer 2

试试这个：

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

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

Answer 3

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

B.您的 maxLength 属性有误。

C.给你的 TextInput 一个 value 属性：值={文本}

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

UseState 不能正确更新 TextInput |反应

3 个答案: