🐞 fix(购物页面): 修复多选流程产生的bug

src/components/checkbox/index.tsx

@@ -1,6 +1,7 @@
+import { usePropsValue } from '@/use/useCommon'
 import { View } from '@tarojs/components'
 import classnames from 'classnames'
-import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
+import React, { forwardRef, SetStateAction, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import IconFont from '../iconfont/iconfont'
 import styles from './index.module.scss'
 
@@ -37,7 +38,25 @@ export default forwardRef((props: params, ref) => {
     customTextClass = '',
     hiddenCheckboxIcon = false,
   } = props
-  const [selected, SetSelected] = useState(false)
+  console.log('Rerender component: checkbox', status)
+  const [selected, setSelected] = usePropsValue({
+    value: status,
+    defaultValue: false
+  })
+  // const selectedRef = useRef(status)
+  // if (status !== undefined){
+  //   selectedRef.current = status
+  // }
+  // const [, setForceUpdate] = useState({})
+  // const setSelected = useCallback((v: SetStateAction<boolean>) => {
+  //   const nextValue = typeof v === 'function' ? (v as (prevValue: boolean) => boolean)(selectedRef.current) : v
+  //   console.log('对比',nextValue, selectedRef.current)
+  //   if (nextValue === selectedRef.current) return
+  //   selectedRef.current = nextValue
+  //   console.log('强制刷新', nextValue, selectedRef.current)
+  //   setForceUpdate({})
+  // }, [])
+
   const onSelectEven = () => {
     if (disabled) return false
     let res = !selected
@@ -46,11 +65,12 @@ export default forwardRef((props: params, ref) => {
     } else {
       onClose?.()
     }
-    SetSelected(res)
+    console.log('res', res)
+    setSelected(res)
   }
 
-  const handleClickChildren = (event) => {
-    if (!triggerLabel){
+  const handleClickChildren = event => {
+    if (!triggerLabel) {
       return event.stopPropagation()
     }
   }
@@ -76,9 +96,9 @@ export default forwardRef((props: params, ref) => {
   useImperativeHandle(ref, () => ({
     onSelectEven,
   }))
-  useEffect(() => {
-    SetSelected(status)
-  }, [status])
+  // useEffect(() => {
+  //   setSelected(status)
+  // }, [status])
   return (
     <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
       {!hiddenCheckboxIcon && (