时间戳

首页 > 解决方案 > useEffect 中的 Scroll 功能反应非常奇怪

javascript - useEffect 中的 Scroll 功能反应非常奇怪

问题描述

我有包含聊天消息的 div，我希望它在渲染后立即向下滚动到最新消息。因此，当我在 useEffect 中对该 div 使用滚动功能时，它不起作用，但是当我在 setTimeout 中运行它时，它起作用了

  useEffect(()=>{
            getConversation()//fetch the conversation
            setTimeout(() => {
                holder.current.scroll(0, holder.current.scrollHeight)          
            console.log('=====================>',holder.current.scrollHeight)

            }, 400);
    },[getConversation])

如果我将时间设置为 200 毫秒而不是 400 毫秒，那真的很奇怪

标签： javascriptreactjs

解决方案

抓取和滚动应该分开。

首次加载组件时会发生提取。

滚动应该在内容加载时发生，并且页面尚未滚动到顶部，因此滚动应该仅取决于这两个标准，例如：

  useEffect(()=>{
      getConversation() // <--- updates state 'conversations'
  },[ getConversation ]);

  useEffect(()=>{
      if( needsToScroll ){  // <-- check somehow if already top
          holder.current.scroll(...)
      }
  }, [ conversation ]);

该needsToScroll条件可能会被省略，然后页面会尝试在 的每次更改时滚动conversation，这可能不可见，不经常并且可以。

另一方面，[ conversation ]如果您需要检查是否holder.current可用（在每次渲染上），则可能需要忽略整个依赖项 ( )。然后needsToScroll可以同时检查holder.current和conversation。

推荐阅读