从回调函数访问使用 useState 定义的状态变量

Question

我的 React 应用程序中有一个评论部分，我想在其他用户评论时实时更新它。我使用 socket.io 来收听服务器发送的新评论事件。当应用程序收到有关新评论的通知时，我会使用新的评论数据更新现有comments列表。

但是，当我尝试从回调访问状态变量comments它始终为空时。如何从回调访问comments，以便可以将新数据附加到现有的注释列表中。任何帮助都非常感谢。

const Discussion = ({ lessonId,lessonName }) => {
const [comments, setComments] = useState([]);
const updateComments = (data) => {
// this is always empty, even though it contains a list of objects and rendered as comments
console.log(comments) 
// This results in something like [data]. Existing objects have been disappeared.
setComments([...comments,data])
}
useEffect(() => {
Axios.get('/courses/lessons/' + lessonId + '/comments')
.then(res => {
console.log(res.data);
setComments(res.data);
socket.on('reply',data => {
console.log(data)
})
// existing list of comments is updated with new data.
socket.on('comment_'+lessonId,(data) => updateComments(data))
})
.catch(err => {
console.log(err);
alert('An error occured');
});
}, [lessonId]);
return <div></div>
};

Answer 1

updateComments

在useEffect内部调用，它使用的注释值将仅限于闭包useEffect，因此它无法访问更新的注释值，除非useEffect依赖于comments

这里的优化解决方案是使用功能状态更新程序

const updateComments = (data) => {
setComments(prevComments => [...prevComments,data])
}