我遇到了TextInput的问题,该问题从用户那里获取输入,还有一个按钮,它在TextInput中发送消息并清除了输入。因此,总体流程为:
代码看起来像:
{/* 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。我认为这是因为:
我尝试了Promise,useEffect和useRef,但没有什么能真正解决此问题。如果有人知道如何解决此问题,请告诉我。预先谢谢你。
您应使用回叫或承诺或异步/等待。我建议您使用Promise。
onSendMessage = msg => {
axios
.post("/your-url", {
msg
})
.then(function(response) {
console.log(response);
// ! You can clear the message here !
setMessage("");
// OR
return new Promise(() => resolve(msg));
})
.catch(function(error) {
console.log(error);
});
};
类似的东西。使用的选择是您的:)
useState挂钩是异步的,不会立即反映和更新,但会触发重新渲染。因此,您不应将此值存储在这样的常量中:const msg = message
。
我将创建一个异步函数,将输入发送到api。 (奖金:添加加载状态以通过禁用提交按钮向用户提供反馈)
const [isLoading, setIsLoading] = useState(false);
onSubmit = async () => {
setIsLoading(true);
const response = await fetch('url/action', settings);
if(response){
setIsLoading(false);
return response.json();
}
}
<TextInput
style={styles.messageInput}
multiline
onChangeText={text => {
setMessage(text);
}}
value={message}
/>
<Button
title={"Send"}
onPress={() => onSubmit()}
disabled={isLoading}
style={styles.sendButton}
/>