即时响应重新加载消息

Question

我制作了消息应用程序。我使用Django作为后端，使用React作为前端。当我写一条消息并单击发送按钮时，我可以保存消息，但我需要刷新页面才能在消息字段中显示此消息。我想立即显示此消息，然后单击按钮。

当我写一条消息并点击发送按钮时，我会得到消息文本，并使用FetchPost方法将其保存到Django中

在消息传递区域，我使用Fetch-GET方法获取所有消息，并将所有消息保存到Conversation状态。然后，我将使用{messages}显示所有消息

发送消息：

const send_message= (e, data) => {
e.preventDefault();
fetch('http://localhost:8000/api/messages/', {
method: 'POST',
headers: {
Authorization: `JWT ${localStorage.getItem('token')}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({conversation: selectedMesaj.conversation, sender: username, msg_content:  inputfield, reciepent: [`${selectedMesaj.sender}`], })
})
.then(res => res.json())
.then(json => {
setGonderMesaj(json.id);
});

};

获取所有消息：

useEffect(() => {
fetch("http://localhost:8000/api/messages/",{
method:'GET',
headers: {
'Content-Type':'application/json',
'Authorization': `JWT ${localStorage.getItem('token')}`
}
})
.then( res => res.json())
.then( resp => setMessages(resp))
.catch( error => console.log(error))
}, [])

显示所有消息：

{messages}

它是有效的，但我的问题是想象在Whatsapp上聊天时发送消息，你必须刷新页面以显示你发送的消息或你发送的信息。我希望消息在发送或接收后立即出现在屏幕上。

我不知道如何处理它，但我认为必须使用API，因为我用Django Rest框架构建了这个消息应用程序。

我在等你的答案。我真的不知道如何解决这个问题。

Answer 1

您是否尝试将massages放在useEffect的空数组中？window.location.reload();-将重新加载页面，但如果你想重新渲染，你可以用道具/状态触发更新。