问题:React开发中经常会遇到,组件渲染时都是上一次的数据,每次修改state数据,都不会立即在页面上显示更新。
原因:这是由于React里事件分为合成事件和原生事件,合成事件和钩子函数都是异步的,原生事件是同步的。由于useState是异步事件,所以会出现异步更新问题。在调用setData()的过程中,不要试图立即获取数据状态的变化。
解决方案:使用useRef存储数据,useEffect监听数据变化,并进行更新。
定义:
const [initEditClassFormData, setInitEditClassFormData] = useState();
const initFormRef = useRef();
useEffect(() => {
initFormRef.current = initEditClassFormData;
}, [initEditClassFormData]);
调用:
使用时,不再用initEditClassFormData,使用initFormRef.current
initFormRef.current