更新套接字事件时，为什么我的状态为空

Question

我有一个聊天组件，它连接到一个套接字并检索消息。在事件allMessages上，我通过setMessages将消息设置为状态，按预期工作。我的问题是，当调用事件newMessage时，messages似乎是空的。如何将新邮件添加到当前邮件列表中？

export default function ChatPage(props) {

const {socket} = useSelector((state) => state.socket);
const [messages, setMessages] = useState([]);
const [message, setMessage] = useState('');
const [chatId, setChatId] = useState(null);
const classes = useStyles();
function handleSubmit(event) {
event.preventDefault();
if (socket && chatId) {
socket.emit('submitNewMessage', ({content: message, chatId: chatId}));
setMessage('');
};
};
useEffect(async () => {
let res = await api.getChatId({friendId: props.match.params.userId});
if (res.status === 200 && res.data.chatId) {
setChatId(res.data.chatId);
};
},[]);
useEffect(() => {
if (chatId && socket) {
socket.emit('joinChat', chatId);
socket.on('allMessages', (allMessages) => {
setMessages([...allMessages]);
});
socket.on('newMessage', (newMessage) => {
setMessages([...messages, newMessage])
});
};
}, [chatId, socket]);
return (
<Grid container className={classes.root}>
<Navbar />
<main className={classes.main}>
<Grid>
<Typography variant='h4'>
Chat Page {props.match.params.userId}
</Typography>
{messages && messages.map(message => (
<Typography variant='h4'>
{message.content}
</Typography>))
}
<Grid item>
<TextField
id="input"
name="message"
value={message}
onChange={(event)=> setMessage(event.target.value)}
label="Multiline"
multiline
rows={4}
defaultValue="Default Value"
variant="outlined"
/>
<Button type="submit" onClick={handleSubmit}>Submit</Button>
</Grid>
</Grid>

</main>
</Grid>
);
};

Answer 1

这似乎是一个范围界定问题。将函数传递到setMessages中：

setMessages(msgs => [...msgs, newMessage])

msgs参数将允许您访问当前值，返回值是您希望设置的新状态。