在react项目中,子组件通过useImperativeHandle将自身的两个setState方法暴露给父组件,父组件通过ref调用这些方法的时候其中一个状态(skuBreak)出现了异常,又会再次被初始化成false,但是getDisabledLabel代码运行是没问题的,打印出来的skuBreak虽然又变回了false,但是展示在页面上依然是‘xxx’,
子组件:
function BtnGroup({ onBuyNow, onAddCart }, ref) {
// 。。。其他代码
const [btnDisabled, setBtnSta] = useState(disabled);
const [skuBreak, setSkuBreak] = useState(false);
const getDisabledLabel = useCallback(() => {
console.log('🚀 ~ BtnGroup ~ skuBreak:', Date.now(), skuBreak);
// 。。。其他代码
if (skuBreak) {
return 'xxx'
}
}, [skuBreak]);
useImperativeHandle(ref, () => ({
setDisabled: (sta) => {
setBtnSta(sta);
},
setSkuBreak: (sta) => {
setSkuBreak(sta);
},
resetDisabled: () => {
setBtnSta(disabled);
},
}));
useEffect(() => {
setBtnSta(disabled);
}, [disabled]);
// 。。。其他代码
return <Button>{getDisabledLabel()}<Button />
}
父组件调用
const handleBreakSkuChange = useCallback(() => {
btnGroupRef.current.setSkuBreak(true);
btnGroupRef.current.setDisabled(true);
}, []);
<BtnGroup ref={btnGroupRef} />
希望大佬告知原因,如果有说的不明白的地方 我会补充
disabled
从哪里来?btnDisabled
没用到,setBtnSta
的意义是什么?getDisabledLabel
没有用来作为useEffect
的依赖,用useCallback
的目的是什么?