Блог

В моем примере есть прокручиваемый div, и я пытаюсь обновить состояние (просто счетчик) внутри события onscroll этого div. Происходит то, что оно обновляется только один раз (в первый раз). Это рабочий вариант моего примера.

 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;

 

Если вы хотите обновить состояние при прокрутке, вы можете использовать onScroll предоставленный 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;