使用钩子将 React class 组件转换为功能组件：事件侦听器的问题

Question

I had a picture zooming component as a React class component. I then wanted to convert it to functional component and make it work with hooks. I almost have it down but I run into this problem that I can only scroll once in and once out. I'm using state variable size as a limit to zoom, starting at 30. But currently when I scroll it wont continuously keep zooming until limit but just a single step in and out. What is causing this limit and how can I fix it?

const ProductPicture = (props) => {

    const [size, setSize] = useState(30);
    
    const zoomTarget = useRef(null)

    const handleScroll = useCallback((event) => {
        if (event.deltaY > 0 && size < 50) {
            setSize(size + 2)
        } else if (event.deltaY < 0 && size > 20) {
            setSize(size - 2)
        } 
    })

    useEffect(() => {
        zoomTarget.current.addEventListener('wheel', handleScroll, true); 
        return() => {zoomTarget.current.removeEventListener('wheel', handleScroll, true)}
    },[]);

    return (
        <div className="livetods-product-image-container" style={{
            top: openAsModal() ? '25%' : '20%',
            left: openAsModal() ? '30%' : '',
            right: openAsModal() ? '30%' : '',
            width: size + "%"        
        }} >
    
        <div className="livetods-product-image-button-container" >
                    <div></div>             
                    <h6 className="livetods-product-image-name">{props.name}</h6>
                    <span className="livetods-modal-header-close-button" onClick={e => props.hideImage()}>&times;</span>
        </div>
        
            <div style={{width: "100%", height:"100%"}}>               
                <div ref={zoomTarget} style={{position: "relative"}}>
                    <div style={{position:'absolute', padding: '5px'}}>
                        <FontAwesomeIcon icon={faSearchPlus} color={'red'} style={{ width: '20px', height: '20px', pointerEvents:"none"}}/>
                    </div>
                    <img src={props.src} style={{borderRadius: "5px", width: '100%'}} /> 
                </div>   
            </div>
    
        </div>
    );
} 

Answer 1

You need to pass an updater function to setSize instead of giving it a value. ( Doc )

const handleScroll = useCallback((event) => {
    const deltaY = event.deltaY
    setSize((size) => {
        if (deltaY > 0 && size < 50) {
            return size + 2
        } else if (deltaY < 0 && size > 20) {
            return size - 2
        }
        return size
    })
}, [])

---

Explanation

The useCallback hook cache the callback so that it will always get the same callback reference as long as no item in the dependency array has changed. (The code in the question misses the dependency array, which is not a valid usage) ( Doc )

The code in the question always reuse the same callback reference since no dependency array is given. In this case, inside the callback, size is always equals to its initial value (ie 30 ) and set the size to either 30 + 2 or 30 - 2 .