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

【问题标题】：Access state variables defined with useState from callback function从回调函数访问使用 useState 定义的状态变量
【发布时间】：2020-05-13 07:03:11
【问题描述】：

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

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

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>
};

【问题讨论】：

标签： reactjs list socket.io callback react-hooks

【解决方案1】：

updateComments 在useEffect 内部被调用，它使用的 cmets 值将被限制为 useEffect 的闭包，因此除非 useEffect 依赖于 comments，否则它将无法访问更新后的 cmets 值/p>

这里的优化解决方案是利用功能状态更新器

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

【讨论】：