useState 在合成事件中是异步的
合成时间是什么呢
合成事件: 简单来说 比如onClick,或者 onChange 或者说是 Input之类的事件
所以一个情景是这样的
当你在onClick
中这样设置了状态,并赋值上去,但是打印的值是上一次的值。
附代码一份
function App() {
const [state, setstate]: {} = useState(0);
const count: number = 0;
const setT = () => {
setstate(++count);
console.log(state)
};
return (
<div>
<button onClick={setT}>点击+1</button>
</div>
);
}
这时候打印出来的state 是0 并不是1
怎么解决呢
我这里使用自定义Hooks 来解决,实现方式是这样
function App() {
const [state, setstate]: {} = useState(0);
const count: number = 0;
// 自定义hooks
const useSyncCallback = callback => {
const [proxyState, setProxyState] = useState({ current: false });
const Func = useCallback(() => {
setProxyState({ current: true });
}, [proxyState]);
useEffect(() => {
if (proxyState.current === true) {
setProxyState({ current: false });
}
}, [proxyState]);
useEffect(() => {
proxyState.current && callback();
});
return Func;
};
const func = useSyncCallback(() => {
console.log(state);
});
const setT = () => {
setstate(++count);
func()
};
return (
<div>
<button onClick={setT}>点击+1</button>
</div>
);
}
今天是2022年1月31日补充
function App() {
const [state, setstate]: {} = useState(0);
const count: number = 0;
const setT = () => {
setstate(++count);
console.log(state, '这里是SetT'); // 这里打印出来的是旧值,获取不到最新的
};
useEffect(() => {
console.log(state, '最新的state'); // 这里便能够打印最新的state
}, [state])
return (
<div>
<button onClick={setT}>点击+1</button>
</div>
);
}