From aab41c06535b631d210dea0da8a37e93146f4699 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Wed, 1 Mar 2023 15:28:47 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix(ID1001331=E8=89=B2=E5=8D=A1?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E8=B7=9F=E7=9D=80=E8=B7=B3=E5=8A=A8):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/productItem/index.tsx | 66 +++++++++++-------- src/pages/colorCardList/index.tsx | 22 +++---- 2 files changed, 50 insertions(+), 38 deletions(-) diff --git a/src/pages/colorCardList/components/productItem/index.tsx b/src/pages/colorCardList/components/productItem/index.tsx index c0338bf..0dcc666 100644 --- a/src/pages/colorCardList/components/productItem/index.tsx +++ b/src/pages/colorCardList/components/productItem/index.tsx @@ -10,7 +10,8 @@ interface ProductItemParamType { id: number name: string } -export interface ParamType { + +export interface ProductItemParam { id: number affiliation_product: ProductItemParamType[] color_card_name: string @@ -18,8 +19,12 @@ export interface ParamType { lab: { l: number; a: number; b: number } rgb: { r: number; g: number; b: number } is_add: boolean - onSelect?: (val: ParamType, status: boolean) => void count?: number + +} +export interface ParamType { + value: ProductItemParam + onSelect?: (val: ProductItemParam, status: boolean) => void selectList?: any[] } @@ -27,32 +32,11 @@ export interface ParamType { const limit = 5 export default memo((props: ParamType) => { - const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb, selectList } = props - const [checkStatus, setCheckStatus] = useState(false) - const changeSelect = () => { - console.log('isDisabled', isDisabled) - if (props.is_add) { return false } - if (isDisabled) { - alert.none('每次最多申请5种面料') - return false - } - setCheckStatus(!checkStatus) - props.onSelect?.(props, !checkStatus) - } - const onSelect = () => { - if (props.is_add) { return false } - props.onSelect?.(props, true) - setCheckStatus(true) - } - const onClose = () => { - props.onSelect?.(props, false) - setCheckStatus(false) - } - + const { selectList } = props const isDisabled = useMemo(() => { const set = new Set(selectList?.map(item => item.id)) if (selectList) { - if (set.has(props.id)) { + if (set.has(props.value.id)) { return false } return set.size >= limit @@ -62,9 +46,37 @@ export default memo((props: ParamType) => { } }, [selectList]) + return +}) + +const Index = memo((props: ParamType&{ isDisabled: boolean }) => { + console.log('刷新') + const { affiliation_product, color_card_name = '', texture_url = '', lab, rgb } = props.value + const { isDisabled } = props + const [checkStatus, setCheckStatus] = useState(false) + const changeSelect = () => { + console.log('isDisabled', isDisabled) + if (props.value.is_add) { return false } + if (isDisabled) { + alert.none('每次最多申请5种面料') + return false + } + setCheckStatus(!checkStatus) + props.onSelect?.(props.value, !checkStatus) + } + const onSelect = () => { + if (props.value.is_add) { return false } + props.onSelect?.(props.value, true) + setCheckStatus(true) + } + const onClose = () => { + props.onSelect?.(props.value, false) + setCheckStatus(false) + } + const labAndImgObj = useMemo( () => { - return { lab: props.lab, rgb: props.rgb, texture_url: props.texture_url } + return { lab: props.value.lab, rgb: props.value.rgb, texture_url: props.value.texture_url } }, [props], ) @@ -80,7 +92,7 @@ export default memo((props: ParamType) => { e.stopPropagation()}> - + }) diff --git a/src/pages/colorCardList/index.tsx b/src/pages/colorCardList/index.tsx index 1c66e61..851003e 100644 --- a/src/pages/colorCardList/index.tsx +++ b/src/pages/colorCardList/index.tsx @@ -3,7 +3,7 @@ import Taro, { getCurrentPages, useDidShow } from '@tarojs/taro' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import classNames from 'classnames' import styles from './index.module.scss' -import type { ParamType } from './components/productItem' +import type { ParamType, ProductItemParam } from './components/productItem' import ProductItem from './components/productItem' import InfiniteScroll from '@/components/infiniteScroll' import Search from '@/components/search' @@ -13,7 +13,7 @@ import { alert } from '@/common/common' export default () => { const { fetchData, state: cardState } = GetColorCardApi() - const [colorCardData, setColorCardData] = useState<{ list: ParamType[]; total: number }>({ + const [colorCardData, setColorCardData] = useState<{ list: ProductItemParam[]; total: number }>({ list: [], total: 0, }) @@ -22,7 +22,7 @@ export default () => { size: 10, }) - const shopColorCardData = useRef([]) + const shopColorCardData = useRef([]) // 获取已加入购物车的数据id const getShopId = () => { @@ -56,7 +56,9 @@ export default () => { } // 选择的数据 - const [selectList, setSelectList] = useState([]) + const [selectList, setSelectList] = useState([]) + const selectListRef = useRef([]) + useEffect(() => { selectListRef.current = selectList }, [selectList]) // 数据加载状态 const statusMore = useMemo(() => { @@ -103,21 +105,19 @@ export default () => { // 多选 const multipleSelection = useRef([]) - const onSelectData = (val, status) => { - console.log('onSelectData', val, status) - console.log('selectList', selectList) + const onSelectData = useCallback((val, status) => { if (status) { multipleSelection.current.push(val) - setSelectList(e => [val, ...e]) + setSelectList(e => [val, ...selectListRef.current]) } else { - const res = selectList?.filter((item) => { + const res = selectListRef.current?.filter((item) => { return val.id != item.id }) multipleSelection.current = res setSelectList(res) } - } + }, []) return @@ -135,7 +135,7 @@ export default () => { {colorCardData.list?.map((item) => { return ( - + ) })}