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

在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} />

image.png

希望大佬告知原因,如果有说的不明白的地方 我会补充

阅读 741
1 个回答
  1. disabled从哪里来?
  2. btnDisabled没用到,setBtnSta的意义是什么?
  3. getDisabledLabel没有用来作为useEffect的依赖,用useCallback的目的是什么?
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏