我在 SO 上看到过这个问题,但我似乎无法弄清楚它为什么存在。
我正在关注来自的教程here https://medium.com/swlh/creating-a-simple-real-time-chat-with-net-core-reactjs-and-signalr-6367dcadd2c6
我正在使用 useState 但当我尝试更新状态时,数组为空。我正在使用状态最初创建一个空数组。在收到消息时,我尝试使用扩展运算符将消息添加到数组中,我已经无数次使用它来将对象添加到数组中(但从未在 useEffect 中使用)。
如果我取消注释行的注释,“聊天”将按其应有的方式更新,但我无法理解为什么扩展运算符不起作用,我需要使用 useRef 来使其工作。我不想为每个相应的 useState 提供大量的 useRef (至少不知道为什么有必要)
任何人都可以看到我做错了什么,或者解释为什么我需要 useRef 吗?
const [chat, setChat ] = useState([]);
//const latestChat = useRef(null);
//latestChat.current = chat;
// ...
useEffect(() => {
if (connection) {
connection.start()
.then(result => {
console.log('Connected!');
connection.on('ReceiveMessage', message => {
const newMsg = {
user: message.user,
message:message.message
}
setChat([...chat, newMsg]); // issue with this line. chat is always empty
//const updatedChat = [...latestChat.current];
//updatedChat.push(message);
//setChat(updatedChat);
});
})
.catch(e => console.log('Connection failed: ', e));
}
}, [connection]);
你这里有两个选择
- add
chat
陈述到useEffect dependency array
所以它知道这取决于chat
.
useEffect(() => {
if (connection) {
//...
setChat([...chat, newMsg]); // issue with this line. chat is always empty
//...
}
}, [connection, chat]);
- use
setState callback
更新chat
所以你不会得到stale data
useEffect(() => {
if (connection) {
//...
setChat((ch) => [...ch, newMsg]); // issue with this line. chat is always empty
//...
}
}, [connection]);
其中第二种方式更合适。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)