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

src/use/useCommon.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState, SetStateAction, useMemo, useCallback } from 'react'
 
 //倒计时hook
 export const useTimeCountDown = () => {
@@ -33,7 +33,7 @@ export const useTimeCountDown = () => {
     setTimeStatus(() => 1)
     if (startData >= endDate) {
       clearInterval(timeObj.current)
-      setShowTime((e) => ({ ...e, DD: '00', HH: '00', MM: '00', SS: '00' }))
+      setShowTime(e => ({ ...e, DD: '00', HH: '00', MM: '00', SS: '00' }))
       setTimeStatus(() => 2)
       return false
     }
@@ -51,7 +51,7 @@ export const useTimeCountDown = () => {
     var MM = ('00' + mm).slice(-2)
     var SS = ('00' + ss).slice(-2)
     // console.log('endTime::', `${DD}-${HH}-${MM}-${SS}`)
-    setShowTime((e) => ({ ...e, DD, HH, MM, SS }))
+    setShowTime(e => ({ ...e, DD, HH, MM, SS }))
   }
   return {
     showTime,
@@ -93,7 +93,7 @@ type Options = {
 }
 
 const defaultOptions = {
-  deep: false
+  deep: false,
 }
 /**
  * 适用于 memo 第二个入参 手动触发渲染
@@ -107,13 +107,13 @@ export const useNeedMemoCallback = (options: Options = defaultOptions) => {
     // console.log('memo==>', prevProps, nextProps)
     let needMemoized = true
     // 引用类型
-    // function array object   
+    // function array object
     // 基本类型
     // number boolean string number symbol null undefined
-  
+
     // 循环props对象
     const handleDiff = () => {
-      for (let [key, value] of Object.entries(prevProps)){
+      for (let [key, value] of Object.entries(prevProps)) {
         if (!Object.is(value, nextProps[key])) {
           // console.log('函数不相等',value === nextProps[key])
           // console.log('asdfasdf',value)
@@ -121,48 +121,56 @@ export const useNeedMemoCallback = (options: Options = defaultOptions) => {
           break
         }
       }
-        // Object.entries(prevProps).forEach(([key, value]) => {
-        //   if (!nextProps.hasOwnProperty(key)) {
-        //     needMemoized = false
-        //     // 新增的属性
-        //     if (Object.prototype.toString.call(value) === '[object Object]') {
-        //       parent[key] = {}
-        //     } else if (Object.prototype.toString.call(value) === '[object Array]') {
-        //       parent[key] = []
-        //     }
-        //   }
-        //   if (typeof data[key] === 'object') {
-        //     o[key] = internalSetData(parent[key], data[key])
-        //   } else {
-        //     // 核心处理逻辑
-        //     // key == data第一层  如果要做到data第二层呢？所以需要递归
-        //     if (parent[key] != data[key]) {
-        //       o[key] = data[key]
-        //       changed = true
-        //     }
-        //   }
-        // })
+      // Object.entries(prevProps).forEach(([key, value]) => {
+      //   if (!nextProps.hasOwnProperty(key)) {
+      //     needMemoized = false
+      //     // 新增的属性
+      //     if (Object.prototype.toString.call(value) === '[object Object]') {
+      //       parent[key] = {}
+      //     } else if (Object.prototype.toString.call(value) === '[object Array]') {
+      //       parent[key] = []
+      //     }
+      //   }
+      //   if (typeof data[key] === 'object') {
+      //     o[key] = internalSetData(parent[key], data[key])
+      //   } else {
+      //     // 核心处理逻辑
+      //     // key == data第一层  如果要做到data第二层呢？所以需要递归
+      //     if (parent[key] != data[key]) {
+      //       o[key] = data[key]
+      //       changed = true
+      //     }
+      //   }
+      // })
     }
     handleDiff()
     return needMemoized
   }
 }
 
-const needMemo = useNeedMemoCallback()
-const hobby = {
-      play1: 1,
-      play2: 2
-    }
-const bool = needMemo(
-  {
-    name: '小明',
-    age: 18,
-    hobby: hobby,
-  },
-  {
-    name: '小明',
-    age: 18,
-    hobby: hobby,
-  },
-)
-// console.log('bool==>', bool)
+type UsePropsValueOptions<T> = {
+  value?: T
+  defaultValue: T
+  onChange?: (v: T) => void
+}
+
+export function usePropsValue<T>(options: UsePropsValueOptions<T>) {
+  const { value, defaultValue, onChange } = options
+
+  const [, setForceUpdate] = useState({})
+
+  const stateRef = useRef<T>(value !== undefined ? value : defaultValue)
+  if (value !== undefined) {
+    stateRef.current = value
+  }
+
+  const setState = useCallback((v: SetStateAction<T>, forceTrigger: boolean = false) => {
+    // `forceTrigger` means trigger `onChange` even if `v` is the same as `stateRef.current`
+    const nextValue = typeof v === 'function' ? (v as (prevState: T) => T)(stateRef.current) : v
+    if (!forceTrigger && nextValue === stateRef.current) return
+    stateRef.current = nextValue
+    setForceUpdate({})
+    return onChange?.(nextValue)
+  }, [])
+  return [stateRef.current, setState] as const
+}