React 钩子正在覆盖对象数组
React hooks are overwritting object array
我正在尝试使用 React 钩子和 Wit.ai 编写聊天机器人界面。
我试过强制设置消息 (setMessages([...messages, currentValue]) 但这也不起作用。代码如下:
const [currentValue, setCurrentValue] = useState('');
const [messages, setMessages] = useState([]);
const handleChange = (event) => {
setCurrentValue(event.target.value); // handling input change
}
const sendMessage = (event) => {
event.preventDefault();
if (currentValue.trim() !== '' || currentValue.trim().length > 1) {
witClient.message(currentValue).then(data => {
setMessages(() => [...messages, {text: currentValue, sender: 'user'}]); // here i set the user message
if (data.entities) {
setMessages(() => [...messages, {text: 'message from bot', sender: 'bot'}]); // this line seems to overwrite the user message with the bot message
setCurrentValue('');
}
});
}
document.querySelector('input').focus();
}
当我处理机器人响应时,它会覆盖用户消息。
当您在 if statement
之后访问 messages
时,您实际上是在覆盖第一个更改,因为 [...messages, {text: currentValue, sender: 'user'}]
只会反映在下一个 render
中。一次设置所有更改以防止出现这种情况
const sendMessage = (event) => {
event.preventDefault();
if (currentValue.trim() !== '' || currentValue.trim().length > 1) {
witClient.message(currentValue).then(data => {
let newMessages = [...messages, {text: currentValue, sender: 'user'}]
if (data.entities) {
newMessages = newMessages.concat({text: 'message from bot', sender: 'bot'})
setCurrentValue('');
}
setMessages(messages)
});
}
document.querySelector('input').focus();
}
由于您依赖于先验值,因此您可以使用功能模式来设置状态,如下所示:
文档:https://reactjs.org/docs/hooks-reference.html#functional-updates
setMessages((priorMessages) => [...priorMessages, {text: currentValue, sender: 'user'}]);
======================================
if (data.entities) {
setMessages((priorMessages) => [...priorMessages, {text: 'message from bot', sender: 'bot'}]);
我正在尝试使用 React 钩子和 Wit.ai 编写聊天机器人界面。
我试过强制设置消息 (setMessages([...messages, currentValue]) 但这也不起作用。代码如下:
const [currentValue, setCurrentValue] = useState('');
const [messages, setMessages] = useState([]);
const handleChange = (event) => {
setCurrentValue(event.target.value); // handling input change
}
const sendMessage = (event) => {
event.preventDefault();
if (currentValue.trim() !== '' || currentValue.trim().length > 1) {
witClient.message(currentValue).then(data => {
setMessages(() => [...messages, {text: currentValue, sender: 'user'}]); // here i set the user message
if (data.entities) {
setMessages(() => [...messages, {text: 'message from bot', sender: 'bot'}]); // this line seems to overwrite the user message with the bot message
setCurrentValue('');
}
});
}
document.querySelector('input').focus();
}
当我处理机器人响应时,它会覆盖用户消息。
当您在 if statement
之后访问 messages
时,您实际上是在覆盖第一个更改,因为 [...messages, {text: currentValue, sender: 'user'}]
只会反映在下一个 render
中。一次设置所有更改以防止出现这种情况
const sendMessage = (event) => {
event.preventDefault();
if (currentValue.trim() !== '' || currentValue.trim().length > 1) {
witClient.message(currentValue).then(data => {
let newMessages = [...messages, {text: currentValue, sender: 'user'}]
if (data.entities) {
newMessages = newMessages.concat({text: 'message from bot', sender: 'bot'})
setCurrentValue('');
}
setMessages(messages)
});
}
document.querySelector('input').focus();
}
由于您依赖于先验值,因此您可以使用功能模式来设置状态,如下所示:
文档:https://reactjs.org/docs/hooks-reference.html#functional-updates
setMessages((priorMessages) => [...priorMessages, {text: currentValue, sender: 'user'}]);
======================================
if (data.entities) {
setMessages((priorMessages) => [...priorMessages, {text: 'message from bot', sender: 'bot'}]);