✨ feat(购物车): 使用context解决跨层级问题

src/components/checkbox/index.tsx

@@ -10,9 +10,9 @@ type params = {
   onSelect?: () => void //选择触发
   onClose?: () => void //取消触发
   status?: boolean //是否选中
-  hidden?: boolean   // 隐藏单选框
+  hiddenCheckboxIcon?: boolean // 隐藏多选框
   disabled?: boolean //是否禁用
-  triggerLabel?: boolean   // 点击label是否触发选中
+  triggerLabel?: boolean // 点击label是否触发选中
   circle?: boolean
   round?: boolean
   size?: CheckboxSize
@@ -35,7 +35,7 @@ export default forwardRef((props: params, ref) => {
     customStyles = {},
     customClassName = '',
     customTextClass = '',
-    hidden = false,
+    hiddenCheckboxIcon = false,
   } = props
   const [selected, SetSelected] = useState(false)
   const onSelectEven = () => {
@@ -81,11 +81,14 @@ export default forwardRef((props: params, ref) => {
   }, [status])
   return (
     <View className={classnames(customClassName, styles.checkbox)} style={customStyles} onClick={onSelectEven}>
-      <View className={classnames(styles.checkbox_main, getMainClassName())} hidden={hidden}>
+      {!hiddenCheckboxIcon && (
-        <View className={classnames(styles.checkbox_item, getClassName())}>
+        <View className={classnames(styles.checkbox_main, getMainClassName())}>
-          {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
+          <View className={classnames(styles.checkbox_item, getClassName())}>
+            {selected && <IconFont name='icon-a-jizhumima' size={22} color='#fff'></IconFont>}
+          </View>
         </View>
-      </View>
+      )}
+
       {children && (
         <View className={classnames(styles['checkbox--text'], customTextClass)} onClick={handleClickChildren}>
           {children}

src/components/counter/index.tsx

@@ -12,22 +12,24 @@ type params = {
     onBlue?:(val:number) => void, //失去焦点触发
     onClickBtn?:(val:number) => void, 
     unit?: string,
-    disable?: true|false, //是否禁用
+    disable?: boolean, //是否禁用
 }
 export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => {
     const [value, setValue] = useState<any>({count:defaultNum})
 
-    const onPlus = () => {
+    const onPlus = (event) => {
-        if(disable) return false
+        event.stopPropagation()
-        let {count} = value
+        if (disable) return false
+        let { count } = value
         let num_res = Big(count).add(step).toNumber()
-        num_res = num_res >= maxNum?maxNum:num_res
+        num_res = num_res >= maxNum ? maxNum : num_res
         num_res = formatDigits(num_res)
-        setValue({...value, count:num_res})
+        setValue({ ...value, count: num_res })
         onChange?.(parseFloat(num_res))
         onClickBtn?.(parseFloat(num_res))
     }
-    const minus = () => {
+    const minus = (event) => {
+        event.stopPropagation()
         if(disable) return false
         let {count} = value
         let num_res = Big(count).minus(step).toNumber()
@@ -98,7 +100,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
     }   
     return (
         <View className={styles.main}>
-            <View className={styles.reduce} onClick={() => minus()}>-</View>
+            <View className={styles.reduce} onClick={minus}>-</View>
             <View className={styles.input}>
                 <Input 
                     value={String(value.count)}
@@ -109,7 +111,7 @@ export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0,
                 />
                 <View className={styles.unit}>{unit}</View>
             </View>
-            <View className={styles.plus} onClick={() => onPlus()}>+</View>
+            <View className={styles.plus} onClick={onPlus}>+</View>
         </View>
     )
-}
+}

src/pages/shopping/components/colorKindItem/index.tsx

@@ -9,18 +9,23 @@ import { formatPriceDiv } from '@/common/format'
 import { EnumSaleMode } from '@/common/Enumerate'
 import { useNeedMemoCallback } from '@/use/useCommon'
 import {selectList} from '../../config'
+import { useShoppingContext, useWatch } from '../../context'
 type PropsType = {
   item: Record<string, any> & object
   orderType: EnumSaleMode
-  isSelected: boolean
-  onChecked?: Function
-  onUnChecked?: Function
 }
 
+// 注意：如果在表单控件内部使用 useWatch，由于是直接从Context中取值，memo也会直接失去作用。
+
 const ColorKindItem: FC<PropsType> = memo(
   (props) => {
-    const { item, orderType = EnumSaleMode.Bulk, isSelected = false, onChecked, onUnChecked } = props
+    const { item, orderType = EnumSaleMode.Bulk} = props
-    console.log('重新渲染', item.id, orderType)
+    const { setChangedCheckbox } = useShoppingContext()
+    console.log('重新渲染 ColorKindItem', item.id, orderType)
+
+    const { checked } = useWatch(item?.id)
+
+
     //格式化金额
     const formatPirce = useCallback((price) => {
       return Number(formatPriceDiv(price))
@@ -38,12 +43,12 @@ const ColorKindItem: FC<PropsType> = memo(
 
     const handleSelect = () => {
       console.log('handleSelect')
-      // setCheck(true)
+      setChangedCheckbox({id: item?.id, checked: true})
-      onChecked && onChecked({ ...item, checked: true })
+      // onChecked && onChecked({ ...item, checked: true })
     }
     const handleClose = () => {
-      // setCheck(false)
+      setChangedCheckbox({ id: item?.id, checked: false })
-      onUnChecked && onUnChecked({ ...item, checked: false })
+      // onUnChecked && onUnChecked({ ...item, checked: false })
     }
 
     const getInputValue = debounce(async (num, item) => {
@@ -52,16 +57,15 @@ const ColorKindItem: FC<PropsType> = memo(
       }else{
         item.length = num
       } 
-      onChecked && onChecked({ ...item, checked: true })
+      // onChecked && onChecked({ ...item, checked: true })
     }, 300)
 
     return (
       <MCheckbox
-        triggerLabel={false}
+        status={checked}
-        status={isSelected}
         onSelect={handleSelect}
         onClose={handleClose}
-        customClassName={classnames(styles.checkbox, isSelected ? styles.selected : '')}
+        customClassName={classnames(styles.checkbox, checked ? styles.selected : '')}
         customTextClass={styles.colorKindItem}>
         <View className={styles['colorKindItem__left']}>
           <Image className={styles['colorKindItem__left--image']} mode='aspectFill' src='https://test.cdn.zzfzyc.com/mall/no_img.png'></Image>
@@ -96,9 +100,6 @@ const ColorKindItem: FC<PropsType> = memo(
     const stringifyNextProp = JSON.stringify(nextProp.item)
     console.log('memo==>', preProp, nextProp);
     let needMemoized = true
-    if (preProp.isSelected !== nextProp.isSelected) {
-      needMemoized = false
-    }
     if (preProp.orderType !== nextProp.orderType) {
       needMemoized = false
     }

src/pages/shopping/components/shoppingCart/index.tsx

@@ -1,37 +1,67 @@
-import { FC, ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import { FC, ReactNode, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
-import { ShoppingContext } from '../../context'
+import { InternalShoppingCartAction, ShoppingCartAction, ShoppingContext, useShoppingCart } from '../../context'
 import { ColorMeta, ColorStore, ShoppingContextValue } from '../../context'
 
+export type TriggerCheckboxOptions = { colorStore: ColorStore; changedCheckbox: ColorMeta }
+
 export interface ShoppingCartPropsType {
   initialValues?: ColorStore
-  onTriggerCheckbox?: (options: { colorStore: ColorStore; changedCheckbox: ColorMeta }) => void
+  onTriggerCheckbox?: (options: TriggerCheckboxOptions) => void
   children?: ReactNode
+  ref?: ShoppingCartAction
 }
-
+// 购物车上下文组件
 export const ShoppingCart: FC<ShoppingCartPropsType> = (props) => {
-  const { children, onTriggerCheckbox, initialValues } = props
+  const { children, onTriggerCheckbox, initialValues, ref: refProps } = props
+  console.log('重新渲染 ShoppingCart context', refProps)
+
+  const defaultShoppingCart = useShoppingCart()
+
+  const ref = (refProps || defaultShoppingCart) as InternalShoppingCartAction
 
   const onTriggerCheckboxRef = useRef(onTriggerCheckbox)
   onTriggerCheckboxRef.current = onTriggerCheckbox
 
   const [colorStore, setColorStore] = useState<ColorStore>(() => initialValues || {})
   const [changedCheckbox, setChangedCheckbox] = useState<ColorMeta>({})
+  // 当前高亮的客户
+  const [currentCheckedPurchaserId, setCurrentCheckedPurchaserId] = useState<number>(-1)
+  // 是否管理状态
+  const [isManageStatus, setManageStatus] = useState(false)
 
   const ctx: ShoppingContextValue = useMemo(() => {
+    console.log('useMemo ShoppingContextValue')
     return {
+      isManageStatus,
+      setManageStatus,
+      currentCheckedPurchaserId, // 当前高亮的客户
+      setCurrentCheckedPurchaserId, // 设置高亮当前客户
       colorStore,
-      setChangedCheckbox() {},
+      setChangedCheckbox(color) {
+        setColorStore((prev) => ({ ...prev, [color.id as number]: color }))
+        setChangedCheckbox(color)
+      },
     }
-  }, [colorStore])
+  }, [colorStore, currentCheckedPurchaserId, isManageStatus])
+  // 暴露给外界
+  useImperativeHandle(
+    ref.__INTERNAL__,
+    () => ({
+      getManageStatus() {
+        return ctx.isManageStatus
+      },
+      setManageStatus: ctx.setManageStatus,
+    }),
+    [ctx.isManageStatus, ctx.setManageStatus],
+  )
 
+  // 这里要在 useEffect 也就是刷新 state 后再调用，否则如果在 onFieldsChangeRef 修改值会覆盖掉上次修改
   useEffect(() => {
     onTriggerCheckboxRef.current?.({
       colorStore,
       changedCheckbox,
     })
-
   }, [colorStore, changedCheckbox])
-  
 
   return <ShoppingContext.Provider value={ctx}>{children}</ShoppingContext.Provider>
 }

src/pages/shopping/components/shoppingCartItem/index.tsx

@@ -13,11 +13,10 @@ import ColorKindItem from '../colorKindItem'
 import { EnumSaleMode } from '@/common/Enumerate'
 import { useNeedMemoCallback } from '@/use/useCommon'
 import { selectList } from '../../config'
+import { useShoppingContext } from '../../context'
 
 type PropsType = {
   itemData?: ShoppingCartData
-  selectedId?: number
-  onSelectedId?: Function
 }
 
 const DrawerButton = memo<{ isOpen: boolean }>(({ isOpen }) => {
@@ -34,13 +33,14 @@ enum BackEndSaleModeListFieldMap {
 
 export default memo<PropsType>((props) => {
   console.log('props==>', props)
-  const { itemData, selectedId } = props
+  const { itemData } = props
 
-  console.log('重新渲染 shoppingCartItem', selectedId)
+  console.log('重新渲染 shoppingCartItem')
   const [openDetail, setOpenDetail] = useState(false)
 
   const handleOpenDetail = () => {
     setOpenDetail((isOpen) => !isOpen)
+    handleClickLayout()
   }
 
   const [selected, setSelect] = useState<EnumSaleMode>(0)
@@ -52,96 +52,82 @@ export default memo<PropsType>((props) => {
   const saleModeList = useRef({
     bulk_color_list: itemData?.bulk_color_list,
     length_cut_color_list: itemData?.length_cut_color_list,
-    weight_cut_color_list: itemData?.weight_cut_color_list
+    weight_cut_color_list: itemData?.weight_cut_color_list,
   })
   saleModeList.current = {
     bulk_color_list: itemData?.bulk_color_list,
     length_cut_color_list: itemData?.length_cut_color_list,
-    weight_cut_color_list: itemData?.weight_cut_color_list
+    weight_cut_color_list: itemData?.weight_cut_color_list,
   }
 
-  const [mockList, setMockList] = useState({
+  // const handleChecked = useCallback(
-    0: [
+  //   (current: any) => {
-      { id: 0, sale_mode: 0, roll: 5, length: 0, checked: true },
+  //     console.log('handleChecked', current)
-      { id: 1, sale_mode: 0, roll: 6, length: 0, checked: false },
+  //     const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
-      { id: 2, sale_mode: 0, roll: 7, length: 0, checked: true },
+  //       if (item.id === current.id) {
-    ],
+  //         item = current
-    1: [
+  //       }
-      { id: 5, sale_mode: 1, roll: 0, length: 77700, checked: false },
+  //       return item
-      { id: 6, sale_mode: 1, roll: 0, length: 7600, checked: true },
+  //     })
-      { id: 7, sale_mode: 1, roll: 0, length: 400, checked: true },
+  //     setMockList((pre) => {
-    ],
+  //       return {
-    2: [
+  //         ...pre,
-      { id: 8, sale_mode: 2, roll: 0, length: 11100, checked: false },
+  //         [selected]: tempList,
-      { id: 9, sale_mode: 2, roll: 0, length: 8540, checked: true },
+  //       }
-    ],
+  //     })
-  })
+  //   },
+  //   [mockList, selected],
+  // )
 
-  const handleChecked = useCallback(
+  // const handleUnChecked = useCallback(
-    (current: any) => {
+  //   (current: any) => {
-      console.log('handleChecked', current)
+  //     console.log('handleChecked', current)
-      const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
+  //     const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
-        if (item.id === current.id) {
+  //       if (item.id === current.id) {
-          item = current
+  //         item = current
-        }
+  //       }
-        return item
+  //       return item
-      })
+  //     })
-      setMockList((pre) => {
+  //     setMockList((pre) => {
-        return {
+  //       return {
-          ...pre,
+  //         ...pre,
-          [selected]: tempList,
+  //         [selected]: tempList,
-        }
+  //       }
-      })
+  //     })
-    },
+  //   },
-    [mockList, selected],
+  //   [mockList, selected],
-  )
+  // )
 
-  const handleUnChecked = useCallback(
+  const { setChangedCheckbox, currentCheckedPurchaserId, setCurrentCheckedPurchaserId, isManageStatus } = useShoppingContext()
-    (current: any) => {
-      console.log('handleChecked', current)
-      const tempList = itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
-        if (item.id === current.id) {
-          item = current
-        }
-        return item
-      })
-      setMockList((pre) => {
-        return {
-          ...pre,
-          [selected]: tempList,
-        }
-      })
-    },
-    [mockList, selected],
-  )
 
   const memoList = useMemo(() => {
     return itemData?.[BackEndSaleModeListFieldMap[selected]].length !== 0 ? (
       itemData?.[BackEndSaleModeListFieldMap[selected]].map((item) => {
-        return (
+        // 初始化选中状态
-          <ColorKindItem
+        setChangedCheckbox({ id: item.id, checked: false })
-            key={item.id}
+
-            isSelected={item.checked}
+        return <ColorKindItem key={item.id} item={item} orderType={selected}></ColorKindItem>
-            item={item}
-            orderType={selected}
-            onChecked={handleChecked}
-            onUnChecked={handleUnChecked}></ColorKindItem>
-        )
       })
     ) : (
       <View className={styles.noList}>暂无数据</View>
     )
-  }, [mockList, selected])
+  }, [itemData, selected])
 
   const handleClickLayout = () => {
-    console.log('itemData===>', itemData)
+    if (currentCheckedPurchaserId === itemData?.purchaser_id) {
+      return
+    }
+    setCurrentCheckedPurchaserId(itemData?.purchaser_id as number)
   }
 
   // const { isManager } = useContext(ShoppingContext)
 
   return (
-    <LayoutBlock circle customClassName={classnames(styles.layout, itemData?.purchaser_id === selectedId ? styles.selected : '')} onClick={handleClickLayout}>
+    <LayoutBlock
-      <MCheckbox customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
+      circle
+      customClassName={classnames(styles.layout, itemData?.purchaser_id === currentCheckedPurchaserId ? styles.selected : '')}
+      onClick={handleClickLayout}>
+      <MCheckbox hiddenCheckboxIcon={!isManageStatus} customClassName={styles['checkbox']} customTextClass={styles['checkbox--text']} triggerLabel={false}>
         <View className='flex-row justify-between' onClick={handleOpenDetail}>
           <View className={styles.topItem}>
             <View className='flex-row items-center'>
@@ -152,7 +138,8 @@ export default memo<PropsType>((props) => {
             </View>
             <View className={styles.summary}>
               <Text>
-                已选 {mockList[selected].filter((item) => item.checked).length} 种面料，1 个颜色，共 {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
+                已选 {itemData?.[BackEndSaleModeListFieldMap[selected]].filter((item) => item.checked).length} 种面料，1 个颜色，共{' '}
+                {selected === EnumSaleMode.Bulk ? `${4} 条` : `${4} 米`}
               </Text>
             </View>
           </View>

src/pages/shopping/context/index.ts

@@ -1,15 +1,13 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { useContext } from 'react'
 
 /**
  * 456: {
  *  id: 456,
- *  name: 'asdfasf',
  *  checked: true
  * },
  * 457: {
  *  id: 457,
- *  name: 'dsfaf654',
  *  checked: true
  * }
  */
@@ -21,6 +19,10 @@ export interface ColorMeta {
 }
 
 export interface ShoppingContextValue {
+  isManageStatus: boolean
+  setManageStatus: (isManageStatus: boolean) => void
+  currentCheckedPurchaserId: number
+  setCurrentCheckedPurchaserId: (purchaserId: number) => void
   colorStore: ColorStore
   setChangedCheckbox: (color: ColorMeta) => void
 }
@@ -34,3 +36,43 @@ export function useShoppingContext() {
   }
   return ctx
 }
+
+export function useWatch(id: ColorMeta['id']) {
+  const { colorStore } = useShoppingContext()
+  console.log('colorStore==>', colorStore)
+  return id ? colorStore[id] : colorStore
+}
+
+export interface ShoppingCartAction {
+  setManageStatus: (manageStatus: boolean) => void
+  getManageStatus: () => boolean
+}
+
+export interface InternalShoppingCartAction extends ShoppingCartAction {
+  __INTERNAL__: React.MutableRefObject<ShoppingCartAction | null>
+}
+
+function throwError(): never {
+  throw new Error('有没有用 ref 这个props？')
+}
+
+export function useShoppingCart(): ShoppingCartAction {
+  const __INTERNAL__ = useRef<ShoppingCartAction | null>(null)
+  return {
+    __INTERNAL__,
+    setManageStatus(manageStatus: boolean) {
+      const action = __INTERNAL__.current
+      if (!action) {
+        throwError()
+      }
+      action.setManageStatus(manageStatus)
+    },
+    getManageStatus() {
+      const action = __INTERNAL__.current
+      if (!action) {
+        throwError()
+      }
+      return action.getManageStatus()
+    },
+  } as InternalShoppingCartAction
+}

src/pages/shopping/index.tsx

@@ -1,7 +1,7 @@
 import Search from '@/components/search'
 import { View } from '@tarojs/components'
 import Taro, { useDidShow } from '@tarojs/taro'
-import React, { FC, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+import React, { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import styles from './index.module.scss'
 import classnames from 'classnames'
 import IconText from '@/components/iconText'
@@ -13,22 +13,48 @@ import BottomSettleBar from './components/bottomSettleBar'
 import BottomEditBar from './components/bottomEditBar'
 import { ShoppingCartListApi } from '@/api/index'
 import { dataLoadingStatus } from '@/common/util'
-import { ShoppingCart } from './components/shoppingCart/index'
+import { ShoppingCart, TriggerCheckboxOptions } from './components/shoppingCart/index'
+import {  useShoppingCart, useShoppingContext } from './context'
 
 export const Shopping: FC = () => {
+
+  const [checkboxData, setCheckboxData] = useState<Partial<TriggerCheckboxOptions>>({})
+  
+  const handleTriggerCheckbox = ({ colorStore, changedCheckbox }) => {
+    console.log('handleTriggerCheckbox==>', colorStore, changedCheckbox)
+    setCheckboxData({ colorStore, changedCheckbox })
+  }
+  return (
+    <ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
+      <ShoppingCartContainer checkboxData={checkboxData} />
+    </ShoppingCart>
+  )
+}
+
+interface InternalContainer {
+  checkboxData?: Partial<TriggerCheckboxOptions>
+}
+
+const ShoppingCartContainer:FC<InternalContainer> = (props) => {
+
+  const { checkboxData } = props
+
+  const { isManageStatus, setManageStatus } = useShoppingContext()
+
   //输入了搜索关键字
   const getSearchData = useCallback((e) => {
     // pageNum.current.page = 1
     // setOrderData(() => ({ list: [], total: 0 }))
     // setSearchField((val) => ({ ...val, name: e, size: 10 }))
   }, [])
-  // 是否在 管理 状态
+
-  const [isManage, setManage] = useState(false)
+  const shoppingCart = useShoppingCart()
+  console.log('shoppingCart==>', shoppingCart)
 
   // 管理
   const onStartToManage = () => {
-    setManage((isManage) => !isManage)
+    setManageStatus(!isManageStatus)
-    // ShoppingContext.Consumer
+    // shoppingCart.setManageStatus(!isManageStatus)
   }
 
   const [selectedAmount, setSelectedAmount] = useState(0)
@@ -76,24 +102,14 @@ export const Shopping: FC = () => {
     setShoppingCartData({ list: state.data, total: state.data.length })
   }, [state])
 
-  useDidShow(() => {})
+  
-
-  const [selectedId, setSelectedId] = useState<number>()
-
-  const handleSelectedItem = (item: ShoppingCartData) => {
-    setSelectedId(item.purchaser_id)
-  }
-
-  const handleTriggerCheckbox = () => {
-    
-  }
 
   return (
     <View className={classnames('flex-col', styles.shopping)} id='shoppingContainer'>
       <View className={styles['shopping--topBar']} id='topBar'>
         <Search placeholder='请输入客户名称' showBtn={false} changeOnSearch={getSearchData} debounceTime={300}>
           <View className={styles.flexBox} onClick={onStartToManage}>
-            {isManage ? (
+            {isManageStatus ? (
               <IconText iconName='icon-guanlidingdan' text='取消' customClass={styles['icon--manage--cancel']} />
             ) : (
               <IconText iconName='icon-guanlidingdan' text='管理' />
@@ -103,18 +119,15 @@ export const Shopping: FC = () => {
       </View>
       <View className={classnames('flex-item', 'flex-col', styles['shopping--context'])}>
         <View className={classnames(styles.shopping__list__container, 'flex-item')} style={{ height: listHeight }}>
-          <ShoppingCart onTriggerCheckbox={handleTriggerCheckbox}>
+          <InfiniteScroll statusMore={statusMore}>
-            <InfiniteScroll statusMore={statusMore}>
+            {!!shoppingCartData?.list?.length &&
-              {!!shoppingCartData?.list?.length &&
+              shoppingCartData?.list?.map((item, index) => {
-                shoppingCartData?.list?.map((item, index) => {
+                return <ItemList itemData={item} key={index}></ItemList>
-                  console.log('item==>', item)
+              })}
-                  return <ItemList itemData={item} key={index} selectedId={selectedId}></ItemList>
+          </InfiniteScroll>
-                })}
-            </InfiniteScroll>
-          </ShoppingCart>
         </View>
         <View id='bottomBar'>
-          {isManage ? (
+          {isManageStatus ? (
             <BottomEditBar onDelete={handleDelete} onSelectCheckbox={handleSelectAllCheckbox}></BottomEditBar>
           ) : (
             <BottomSettleBar onSettleAccount={handleSettleAccount} amount={selectedAmount}></BottomSettleBar>
@@ -124,4 +137,5 @@ export const Shopping: FC = () => {
     </View>
   )
 }
+
 export default Shopping

src/styles/iconfont.scss

@@ -3,7 +3,7 @@
   /* Project id 3619513 */
   // url('/src/styles/iconfont.ttf') format('truetype');
   src:
-    url('iconfont.ttf?t=1663556335905') format('truetype');
+    url('/src/styles/iconfont.ttf?t=1663556335905') format('truetype');
 }
 
 .iconfont {