React Hook中useState更新延迟问题及解决

const[zoom, setZoom] = useState(0);
useEffect(() = >{
    document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
},[]);
function scrollFunc(e) {
    setZoom(zoom + 5)
}

const[zoom, setZoom] = useState(0);
useEffect(() = >{
    document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
    return () = >document.getElementById('workspace-content').removeEventListener("mousewheel", scrollFunc); // 记得解绑事件
});
function scrollFunc(e) {
    setZoom(zoom + 5)
}

useEffect(() = >{
    document.getElementById('workspace-content').addEventListener('mousewheel', scrollFunc);
    return () = >document.getElementById('workspace-content').removeEventListener("mousewheel", scrollFunc);
    function scrollFunc(e) {
        setZoom(zoom + 5) e.preventDefault()
    }
},[zoom]);

const [currentIndex, setCurrentIndex] = useState(0)
  const handleLeft = () => {
     setCurrentIndex(currentIndex+ 1)
     console.log(currentIndex)
  }

const [currentIndex, setCurrentIndex] = useState(0)
const currentIndexRef = useRef(0);
  const handleLeft = () => {
     currentIndexRef.current += 1
     console.log(currentIndexRef.current)
  }
useEffect(()=>{
    setCurrentIndex(currentIndexRef.current)
},[currentIndexRef.current])

import React, {useState} from 'react';
 
export default () => {
    const [obj, setObj] = useState({
        a: 1,
        b: 2
      })
 
    const changeObj = () => {
        // 连续触发2次setObj（实际项目不会这样写，我这样写只是为了模拟连续触发2次setObj带来的问题）
        setObj({...obj, a: 2})
        setObj({...obj, b: 3}) 
    }
   return (<div onClick={changeObj}>
          // 此时页面上显示的值为 {a: 1, b: 3}, 出现该问题的原因是因为useState是异步的，在第二次触发setObj时，obj还是没更新a之前的obj，所以出现该结果
            {JSON.stringify(obj)}
           </div>)
}

import React, {useState} from 'react';
 
export default () => {
    const [obj, setObj] = useState({
        a: 1,
        b: 2
      })
 
    const changeObj = () => {
        // 连续触发2次setObj（实际项目不会这样写，为了模拟情况）
        setObj({...obj, a: 2})
        // data标识存储的是更新a后的对象，用这样的方式可以解决连续触发2次带来的问题
        setObj((data) => ({...data, b: 3})) 
    }
   return (<div onClick={changeObj}>
          // 此时页面上显示的值为 {a: 2, b: 3}
            {JSON.stringify(obj)}
           </div>)
}