为什么控制台在 useEffect 中出现不同？

Question

我想确保在滚动的情况下滚动位于区域的中间。


const scrollRef = useScroll(null);

useEffect(() => {
    const wrapper = scrollRef.current;
    console.dir(wrapper, 'wrapper');
    if (wrapper) {
      const hasScroll = wrapper.scrollHeight > wrapper.clientHeight;
      console.log(wrapper.scrollHeight, 'scrollheight');
      console.log(wrapper.clientHeight, 'clientHeight');
      if (hasScroll) {
        const scrollTop = (wrapper.scrollHeight - wrapper.clientHeight) / 2;
        wrapper.scrollTop = scrollTop;
      }
    }
  }, [isLoading]);

if (isLoading) {
    return (
      <TradeSection>
        <Loader />
      </TradeSection>
    );
  }

<Section>
  <TableHeader>
  <TableList ref={scrollRef}>
    <List />
    <CurrentPrice />
    <List />
  </TableList>
<Section>

此代码总体上运行良好。但有时它不起作用根据我的猜测，如果屏幕尺寸变化后刷新，所以我在 useEffect

中添加了控制台

为什么 console.dir > scrollHeight 是不同的结果？为什么同一个区域显示不同的值？

Answer 1

您的 useEffect 在当前 ref 值更改时未更新。这意味着只要 isLoading 更新，您的控制台日志就会触发，但不会捕获 scrollRef.current.

的最终值

只有在 useEffect 可以实际跟踪该值的更改时，将某些内容放入 useEffect 才有用。不幸的是，useRef 是不可能的，因为对象 ref 不会通知您的组件有关当前 ref 值的更改。对于这个用例，正确的钩子实际上是 useCallback;请参阅此 React FAQ answer 以获取解释和有点类似的示例。

为什么控制台在 useEffect 中出现不同？

Why is the console coming out differently in useEffect?

scrollbar

scrollview

console.log

reactjs

use-effect