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])
}

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

1 个答案: