State 在 div 的滚动事件处理程序中仅更新一次

Question

In my example there is a scrollable div and I try to update the state (just a counter) inside onscroll event of this div. What happens is it updates only once (the first time). This is working repl of my example.

import React, {useState, useEffect} from 'react';

function App() {

  let divRef = React.createRef();

  const [state, setState] = useState({
    count: 0,
  });

  useEffect(() => {
    divRef.current.addEventListener('scroll', () => {
      setState({
        count: state.count + 1, // this happens only once
      });
    });
  }, []);

  return (
    <div>
      <div style={{position: 'fixed', top: '0'}}>{state.count}</div>
      <div style={{height: '100px', overflow: 'auto'}} ref={divRef}>
        <div style={{height: '1000px'}}></div>
      </div>
    </div>
  );
}

export default App;

Answer 1

If you want to update state on scroll then you can use onScroll provided by React.

Repl-demo

import React, {useState} from 'react';

function App() {

  const [count, setCount] = useState(0);

  const handleScroll = () => {
    setCount(p => p + 1);
  }

  return (
    <div>
      <div style={{position: 'fixed', top: '0'}}>{count}</div>
      <div style={{height: '100px', overflow: 'auto'}} onScroll={handleScroll}>
        <div style={{height: '1000px'}}></div>
      </div>
    </div>
  );
}

export default App;