react中使用useRef调用子组件的方法更改状态的问题为什么会再次初始化子组件的状态?-灵析社区

PX_13

在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 {getDisabledLabel()} } 父组件调用 const handleBreakSkuChange = useCallback(() => { btnGroupRef.current.setSkuBreak(true); btnGroupRef.current.setDisabled(true); }, []); ![image.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241009/23e870813be54330148fc1b2e3423d71.png) 希望大佬告知原因,如果有说的不明白的地方 我会补充

阅读量:208

点赞量:0

问AI
1. "disabled"从哪里来? 2. "btnDisabled"没用到,"setBtnSta"的意义是什么? 3. "getDisabledLabel"没有用来作为"useEffect"的依赖,用"useCallback"的目的是什么?