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

Posted 2023-04-18

【中文标题】UseState 未使用 TextInput 正确更新 |反应

【英文标题】：UseState not updating properly with TextInput | React

【发布时间】：2021-10-05 15:49:54

【问题描述】：

所以，如果这是重复的，我很抱歉，但是我已经阅读了很多帖子并且找不到解决我的问题的方法，现在我在这里直接寻求帮助。 让我们解释一下这个问题，我的代码中有一个 Modal，它有一个 TextInput 和一个 Button。当 TextInput 中的文本发生更改并且单击 Button 时，我需要更新一个状态，我需要对文本做一些事情（但这对问题本身，所以让我们假设它是console.log)。如果我打开 Modal 并在 TextInput 中写一些东西，它会将文本保存在状态中，但是当我单击 Button 时它什么也不打印。但是当我关闭 Modal 并再次打开它时，如果我点击 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=... 更改为异步函数并在setText(t) 中放置一个等待，但它不起作用。

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

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

---

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

【问题讨论】：

是TextInput您的自定义组件吗？

@nivendha 不，这不是自定义的，它是“react-native”的默认设置

我尝试了代码，对我来说工作正常。 snack.expo.dev/kDsgYNl5t

【参考方案1】：

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

B.您的 maxLength 属性有错字。

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

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

【参考方案2】：

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

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

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

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

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



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

【讨论】：

你能告诉我如何解决这个问题吗？

@VicenzoSouza 我已经更新了我的答案。我希望这会有所帮助。

我现在试过了，不幸的是它没有工作:(。它仍然保留以前模式的值。知道为什么吗？

所以，我尝试了一些其他的东西，发现了一个确实有效的方法，我认为这实际上是一种解决方法，但我只是让按钮使用了一个每次更新的全局变量以及使用的状态使用效果

【参考方案3】：

试试这个：

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


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

【讨论】：

e 将未定义。应该是onChange=(e) => updateText(e)

也可以直接传函数引用，参数会自动处理。像这样onChange=updateText