React组件在设置常量时覆盖另一个组件

Question

我正在创建一个聊天机器人，当用户发送消息时我遇到了问题。

程序过程如下：有一个json，其中存储了与机器人程序交换的所有消息，还有一个是机器人程序预定义的响应。也就是说，当用户发送消息时，会进行检查以查看是否有对该消息的回复。

最初，该消息显示在文本框中的下图用户消息中。该消息已发送，并且与回复一起已在json中。只有在以图形方式添加机器人程序消息之前，才能通过放置警报来查看用户的消息。当我单击"确定"时，警报消失，用户的消息被机器人的消息替换，如下图所示：机器人消息。刷新页面时，这两条消息将正确显示。

因此，问题是，当用户发送消息时，它会短暂出现，但随后会被替换，但只是以图形方式显示。在json中，它显示正确。

我的App.js中的部分代码如下：

const [messages, setMessages] = useState([])
const AddMessage = async(text, type) => {
const res = await fetch('http://localhost:4000/messages/', {
method: 'POST',
headers: {
'content-type': 'application/json'
},
body: JSON.stringify(text, type)
})
const data = await res.json()
//console.log(data)
alert(JSON.stringify(data))
setMessages([...messages, data])
}

return (
<div className='container'>
<div className='chatbox'>
<Header />
<div className='div-messages'>
<Messages messages={messages} onDelete={deleteMessage}/>
</div>
<SendMessage onAddMessageUser={AddMessage} onAddMessageBot={AddMessage}/>
</div>
</div>
);

SendMessage代码的一部分：

const SendMessage = ({ onAddMessageUser, onAddMessageBot }) => {
const onSubmit = (e) => {
e.preventDefault()
if (!text) {
alert('Please write a message!')
return
}
setMessage('')
addUserMessage(text)
addBotMessage(text)
}
function addUserMessage(text) {
type = 'question'
onAddMessageUser({ text, type })
}
function addBotMessage(text) {
var type = 'answer'
var flag = true
for (let key = 0; key < botDataLength; key++) {
if (text === botData[key].question) {
//console.log('true');
//console.log(botData[key].answer)
//alert(botData[key].answer)
text = botData[key].answer
flag = false
}
}
text = flag ? 'Sorry I don't understand' : text
onAddMessageBot({text, type})
}

Answer 1

setMessages需要上一个数组：

setMessages(messages => [...messages, data]);