我遇到了 TextInput 的问题,它从用户那里获取输入,以及一个在 TextInput 中发送消息并清除输入的按钮。所以整体流程是:
- 用户输入 TextInput
- 在某些时候,用户按下按钮(又名 TouchableOpacity)
- 将 TextInput 中的文本存储到临时缓冲区,然后清除 TextInput。
- 通过 api 发送文本。
代码如下:
{/* Message Input */}
<TextInput
style={styles.messageInput}
multiline
onChangeText={text => {
setMessage(text);
}}
value={message}
/>
{/* Send Button */}
<Button
title={"Send"}
onPress={() => {
const msg = message
onSendMessage(msg);
setMessage("");
}}
disabled={false}
style={styles.sendButton}
/>
当用户在点击发送按钮后过早输入时,我的问题就会出现。如果用户决定输入得太早,则 TextInput 不会被清除。我认为这是因为:
- 用户点击发送 => 排队渲染,因为消息状态由按钮的 onPress 中的 setMessage("") 更改
- 用户输入太快 => 排队渲染,因为 TextInput 中的 onChangeText 处理程序更改了消息。问题是来自先前状态的 setMessage 尚未真正处理。因此,此渲染与消息的先前值(又名消息设置为 "" 之前的值)一起排队。
我尝试了 Promise、useEffect 和 useRef,但没有真正解决这个问题。如果有人知道如何解决这个问题,请告诉我。先感谢您。