从回调函数访问用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])
}