React 功能组件状态总是记录初始值

Question

我将在滚动 div 底部时更新状态。我已成功检测到 div 的用户滚动底部，但更新状态总是记录初始值。这是我的代码。

const ExampleApp = () => {
  const [value, setValue] = useState(0);
  useEffect(() => {
        document.addEventListener('scroll', trackScrolling);
        return () => {
            document.removeEventListener('scroll', trackScrolling);
        }
    }, []);
  const trackScrolling = () => {
    const wrappedElement = document.getElementById('vContainer');
    if (isBottom(wrappedElement)) {
        // Here user scrolled to bottom of a div
        console.log('Log Value: ', value); // I want to see the increased value, but always logs 0 every time I scrolled bottom.
        setValue(value + 1);
    }
  }
}

我很好奇为什么每次检测到视图底部时该值都没有增加。当我检测到底部时，增加状态值的解决方案是什么。提前致谢。

Answer 1

您的 console 语句发生在您设置新值之前，只需将两行切换为：

 setValue(value + 1);
 console.log('Log Value: ', value);

Answer 2

这是因为关闭而发生的。

对于 document.addEventListener('scroll', trackScrolling)，函数属性 trackScrolling 与侦听器关联，并与初始 value 绑定，即 0.

检查此代码段：（尝试片段时不要点击整页，否则您将看不到滚动条）

function App() {

  const [value, setValue] = React.useState(0)

  function isBottom(e) { return true }

  React.useEffect(() => {
    document.addEventListener('scroll', trackScrolling)
    return () => {
      document.removeEventListener('scroll', trackScrolling)
    }
  }, [])

  const trackScrolling = () => {
    const wrappedElement = document.getElementById('vContainer')

    if (isBottom(wrappedElement)) {
      console.log('Log Value1: ', value)
      setValue(prev => { 
        console.log('Log Value2: ', prev + 1);
        return prev + 1;
       })
    }
  }
  return <div id="vContainer" style={{height: 500,background: 'yellow', overflow: 'scroll'}}>{value}</div>
}

ReactDOM.render(<App />, document.getElementById('mydiv'))

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<body>
<div id="mydiv"></div>
</body>

React 功能组件状态总是记录初始值

React functional component state always logs initial value

reactjs

react-hooks

react-functional-component