React 钩子值正确呈现但未在 addEventListener 的回调 function 中更新

Question

I'm implementing infinite scroll with hooks in a functional component, I'm having an issue where I'm unable to access the updated value inside the scroll event callback function, here's my code:

 // Get a hook function const {useState, useEffect} = React; const initItems = ['First', 'Second','Third','Fourth','Fifth'] const Example = ({title}) => { const [posts, setPosts] = useState({ data: [], page: 1 }); console.log('FN RENDER') const handleScroll = (e) => { const { scrollHeight, scrollTop, clientHeight } = e.target const bottom = scrollHeight - scrollTop === clientHeight; if (bottom) { console.log('page', posts.page) // page stays 1 const nextPage = posts.page + 1 setPosts(p => ({ data: [...p.data, 'Append'], page: p.page + 1 })) } } useEffect(() => { console.log('USEEFFECT RENDER') setPosts(p => ({ data: initItems, page: 1 })) //using ScrollBox for demo, originally I'm handling the scroll event on the document: document.addEventListener document.getElementById("ScrollBox").addEventListener('scroll',handleScroll); return () => document.getElementById("ScrollBox").removeEventListener('scroll', handleScroll); }, []); return ( <div> <p>Page:{posts.page}</p> <div id="ScrollBox" class="scroll-box"> { posts.data.map(k=> <p>{k} </p>) } </div> </div> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );

 #ScrollBox{ border:1px solid red; height:100px; overflow:auto; width:400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>

If you look into the console, the value of page stays 1 while it is rendered correctly. I used useEffect to attach the event. How can I get the right updated value inside handleScroll ?

-- Edit --

How to get the updated value inside the callback of addEventListener ? #ScrollBox is for the question demo, I instead need to detect scroll on document , which is the reason I'm using the event listener.

Answer 1

The useEffect function only fires when the second parameter has changed. Since you have an empty second parameter, it will never update, and since it never updates, your event handler holds on to the stale closure from the first render no matter how many times you update the state.

You can fix your code by passing the the event listener directly inside the render function rather than in useEffect . You should not do direct DOM manipulation in react anyway.

 // Get a hook function const {useState, useEffect} = React; const initItems = ['First', 'Second','Third','Fourth','Fifth'] const Example = ({title}) => { const [posts, setPosts] = useState({ data: [], page: 1 }); console.log('FN RENDER') const handleScroll = (e) => { const { scrollHeight, scrollTop, clientHeight } = e.target const bottom = scrollHeight - scrollTop === clientHeight; if (bottom) { console.log('page', posts.page) // page stays 1 const nextPage = posts.page + 1 setPosts(p => ({ data: [...p.data, 'Append'], page: p.page + 1 })) } } useEffect(() => { console.log('USEEFFECT RENDER') // <:-- No event handler here --> setPosts(p => ({ data, initItems: page, 1 })) }; []): return ( <div> <p>Page.{posts.page}</p> <.-- NOTE THE EVENT HANDLER HERE --> <div id="ScrollBox" class="scroll-box" onScroll={handleScroll} > { posts;data;map(k=> <p>{k} </p>) } </div> </div> ). }, // Render it ReactDOM.render( <Example />; document.getElementById("react") );

 #ScrollBox{ border:1px solid red; height:100px; overflow:auto; width:400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>