fix: 优化代码，删除一些无用的useEffect赋值

Author: chj-damon

.changeset/chatty-cats-shave.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': minor
+---
+
+优化代码，删除一些无用的useEffect赋值

packages/react-native-picker/src/date-period-input/useDatePeriodInput.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Keyboard } from 'react-native';
 
 import { Modal } from '@td-design/react-native';
@@ -15,45 +15,34 @@ export default function useDatePeriodInput({
   format,
   ...restProps
 }: ImperativeModalChildrenProps<Pick<DatePeriodInputProps, 'value' | 'onChange' | 'format'>>) {
-  const [currentIndex, setCurrentIndex] = useSafeState(0);
-  const [dates, setDates] = useSafeState<[Date | undefined, Date | undefined]>(value ?? [undefined, undefined]);
-  const [minDate, setMinDate] = useSafeState<string | undefined>(undefined); // 对结束时间来说，它的最小值就是开始时间的值
-  const [maxDate, setMaxDate] = useSafeState<string | undefined>(undefined); // 对开始时间来说，它的最大值就是结束时间的值
+  const [dates, setDates] = useSafeState(value ?? [undefined, undefined]);
 
-  useEffect(() => {
-    value && setDates(value);
-  }, [value]);
-
-  const handleChange = (date?: Date) => {
+  const handleChange = useMemoizedFn((date: Date | undefined, index: number) => {
     const [startDate, endDate] = dates;
     if (onChange) {
-      onChange(currentIndex === 0 ? [date!, endDate] : [startDate, date!]);
+      onChange(index === 0 ? [date!, endDate] : [startDate, date!]);
     } else {
-      setDates(draft => {
-        draft[currentIndex] = date;
-        return draft;
+      setDates((draft: any[]) => {
+        const nextDates = [...draft];
+        nextDates[index] = date;
+        return nextDates;
       });
     }
-  };
+  });
 
   /** 点开开始时间选择器 */
   const handleStartPress = () => {
     Keyboard.dismiss();
-    setCurrentIndex(0);
-    if (dates[1]) {
-      setMinDate(undefined);
-      setMaxDate(dayjs(dates[1]).format(format));
-    }
     Modal.show(
       <DatePicker
         {...restProps}
         {...{
           format,
-          onChange: handleChange,
-          minDate,
-          maxDate,
-          value: dates[currentIndex],
+          onChange: date => handleChange(date, 0),
+          value: dates[0],
         }}
+        minDate={undefined}
+        maxDate={dates[1] ? dayjs(dates[1]).format(format) : undefined}
       />,
       {
         position: 'bottom',
@@ -64,21 +53,16 @@ export default function useDatePeriodInput({
   /** 点开结束时间选择器 */
   const handleEndPress = () => {
     Keyboard.dismiss();
-    setCurrentIndex(1);
-    if (dates[0]) {
-      setMinDate(dayjs(dates[0]).format(format));
-      setMaxDate(undefined);
-    }
     Modal.show(
       <DatePicker
         {...restProps}
         {...{
           format,
-          onChange: handleChange,
-          minDate,
-          maxDate,
-          value: dates[currentIndex],
+          onChange: date => handleChange(date, 1),
+          value: dates[1],
         }}
+        minDate={dates[0] ? dayjs(dates[0]).format(format) : undefined}
+        maxDate={undefined}
       />,
       {
         position: 'bottom',
@@ -99,12 +83,6 @@ export default function useDatePeriodInput({
     } else {
       setDates(draft => [undefined, draft[1]]);
     }
-    setMinDate(undefined);
-    if (endDate) {
-      setMaxDate(dayjs(endDate).format(format));
-    } else {
-      setMaxDate(undefined);
-    }
   };
 
   /** 清除结束时间 */
@@ -115,22 +93,12 @@ export default function useDatePeriodInput({
     } else {
       setDates(draft => [draft[0], undefined]);
     }
-    setMaxDate(undefined);
-    if (startDate) {
-      setMinDate(dayjs(startDate).format(format));
-    } else {
-      setMinDate(undefined);
-    }
   };
 
   return {
-    currentIndex,
     dates,
-    minDate,
-    maxDate,
     handleStartPress: useMemoizedFn(handleStartPress),
     handleEndPress: useMemoizedFn(handleEndPress),
-    handleChange: useMemoizedFn(handleChange),
     clearStartDate: useMemoizedFn(clearStartDate),
     clearEndDate: useMemoizedFn(clearEndDate),
   };

packages/react-native-picker/src/date-picker/useDatePicker.ts

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { ImperativeModalChildrenProps } from '@td-design/react-native/lib/typescript/modal/type';
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 import dayjs from 'dayjs';
@@ -14,10 +12,6 @@ export default function useDatePicker({
 }: ImperativeModalChildrenProps<DatePickerPropsBase & ModalPickerProps>) {
   const [date, setDate] = useSafeState<Date | undefined>(value);
 
-  useEffect(() => {
-    setDate(value);
-  }, [value]);
-
   const handleChange = (date?: Date) => {
     setDate(date);
   };

packages/react-native-picker/src/picker/components/Cascade/useCascader.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 import { ImperativeModalChildrenProps } from '@td-design/react-native/lib/typescript/modal/type';
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
@@ -14,12 +14,7 @@ export default function useCascader<T>({
   onChange,
   closeModal,
 }: ImperativeModalChildrenProps<Pick<CascaderProps<T>, 'data' | 'cols' | 'value' | 'onChange'>>) {
-  const [stateValue, setStateValue] = useSafeState<T[]>([]);
-
-  useEffect(() => {
-    const nextValue = generateNextValue(data, value, cols);
-    setStateValue(nextValue);
-  }, [data, value, cols]);
+  const [stateValue, setStateValue] = useSafeState<T[]>(generateNextValue(data, value, cols));
 
   const handleValueChange = (value: PickerData<T>, index: number) => {
     const newValue = [...stateValue];

packages/react-native-picker/src/picker/components/Normal/index.tsx

@@ -22,6 +22,8 @@ function NormalPicker<T>(props: ImperativeModalChildrenProps<NormalPickerProps<T
     ...restProps
   } = props;
 
+  console.log(value, 'value');
+
   const initialValue = data.length > 0 ? data[0].value : undefined;
 
   const { selectedValue, handleOk, handleChange, handleClose } = useNormalPicker({

packages/react-native-picker/src/picker/components/Normal/useNormalPicker.ts

@@ -1,5 +1,3 @@
-import { useEffect } from 'react';
-
 import { ImperativeModalChildrenProps } from '@td-design/react-native/lib/typescript/modal/type';
 import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
 
@@ -12,11 +10,7 @@ export default function useNormalPicker<T>({
   onChange,
   closeModal,
 }: ImperativeModalChildrenProps<Omit<NormalPickerProps<T>, 'data'> & { initialValue?: T }>) {
-  const [selectedValue, selectValue] = useSafeState<T | undefined>();
-
-  useEffect(() => {
-    selectValue(value || initialValue);
-  }, [value, initialValue]);
+  const [selectedValue, selectValue] = useSafeState<T | undefined>(value || initialValue);
 
   const handleChange = (val: PickerData<T>) => {
     selectValue(val.value);

packages/react-native-picker/src/useDatePicker.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useEffect, useImperativeHandle } from 'react';
+import React, { ForwardedRef, useImperativeHandle } from 'react';
 import { Keyboard } from 'react-native';
 
 import { Modal } from '@td-design/react-native';
@@ -44,10 +44,6 @@ export default function useDatePicker({
     };
   });
 
-  useEffect(() => {
-    setDate(value);
-  }, [value]);
-
   const handlePress = () => {
     Keyboard.dismiss();
     Modal.show(<DatePicker {...restProps} {...{ value: date, format, onChange: handleChange }} />, {

packages/react-native-picker/src/usePicker.tsx

@@ -1,4 +1,4 @@
-import React, { ForwardedRef, useEffect, useImperativeHandle } from 'react';
+import React, { ForwardedRef, useImperativeHandle } from 'react';
 import { Keyboard } from 'react-native';
 
 import { Modal } from '@td-design/react-native';
@@ -51,10 +51,6 @@ export default function usePicker<T>({
     };
   });
 
-  useEffect(() => {
-    setState(value);
-  }, [value]);
-
   const handlePress = () => {
     Keyboard.dismiss();
     Modal.show(<Picker {...restProps} {...{ cascade, value: state as any, data, onChange: handleChange }} />, {