优化搜索表单不重复刷新

src/views/OrderFollow.jsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom'
-import { useMemo, useCallback, useEffect, useState } from 'react'
+import { memo, useMemo, useCallback, useEffect, useState } from 'react'
 import {
   Row, Col, Divider, Table, Card, Button, Input,
   Space, Segmented, Radio, Select, AutoComplete, Spin, Form, Switch, DatePicker, List, Avatar
@@ -8,7 +8,6 @@ import {
   StarFilled, ZoomInOutlined, StarOutlined, BarsOutlined, AppstoreOutlined, SearchOutlined
 } from '@ant-design/icons'
 import { Conditional } from '@/components/Conditional'
-import { useFormInput } from '@/hooks/useFormInput'
 import { useGetJson } from '@/hooks/userFetch'
 
 const { RangePicker } = DatePicker;
@@ -180,93 +179,9 @@ const columns = [
     dataIndex: 'comment',
     key: 'comment',
   },
-];
-
-function OrderFollow() {
-
-  const [advanceChecked, toggleAdvance] = useState(false)
-  const [searchCriteria, setSearchCriteria] = useState({
-    type: 'today',
-    orderStatus: '新状态',
-    orderNumber: '订单号',
-    orderLabel: '订单标签',
-    startDate: '走团时间'
-  })
-
-  const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
-
-  useEffect(() => {
-  }, [])
-
-  return (
-    <Spin spinning={false} delay={500}>
-      <Space direction='vertical' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-          <Col span={10}>
-            <Radio.Group
-              options={[
-                { label: '今日任务', value: 'today' },
-                { label: '潜力客户', value: 'star' },
-                { label: '重点订单', value: 'important' },
-                { label: '成行', value: 'myfavorites' },
-                { label: '走团中', value: 'ing' },
-                { label: '走团后一月', value: 'lastMonth' }
-              ]}
-              value={searchCriteria.type}
-              onChange={({ target: { value } }) => {
-                setSearchCriteria({
-                  ...searchCriteria,
-                  type: value
-                })
-              }}
-              optionType='button'
-              buttonStyle='solid'
-              disabled={advanceChecked}
-            />
-          </Col>
-          <Col span={4}>
-            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
-              defaultChecked={false}
-              onChange={() => { toggleAdvance(!advanceChecked) }} />
-          </Col>
-        </Row>
-        <Conditional condition={advanceChecked} whenTrue={<AdvanceSearch onSubmit={(criteria) => {
-          console.info('onSubmit.searchCriteria: ')
-          console.info(criteria)
-          setSearchCriteria({
-            ...criteria,
-            type: 'advance'
-          })
-        }} />}
-        />
-      </Space>
-      <Divider plain orientation='left'></Divider>
-      <Space
-        direction='vertical'
-        size='middle'
-        style={{
-          display: 'flex',
-        }}
-      >
-        {orderListMemo}
-      </Space>
-    </Spin>
-  )
-
-  function OrderList({ searchCriteria }) {
-
-    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
-    console.info(countryList)
-    console.info('OrderList.searchCriteria: ')
-    console.info(searchCriteria)
-    return (
-      <>
-        <Table dataSource={dataSource} columns={columns} />
-      </>
-    )
-  }
+]
 
-  function AdvanceSearch({ onSubmit }) {
+const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
   const [form] = Form.useForm()
   console.info('AdvanceSearch: ')
   function handleSubmit(values) {
@@ -276,6 +191,7 @@ function OrderFollow() {
     <Form
       layout={'inline'}
       form={form}
+      initialValues={{orderLabel: '全部'}}
       onFinish={handleSubmit}
       style={{
         maxWidth: 'none',
@@ -283,7 +199,6 @@ function OrderFollow() {
     >
       <Form.Item label='标签' name='orderLabel'>
         <Select
-            defaultValue='全部'
           style={{
             width: 100,
           }}
@@ -305,7 +220,6 @@ function OrderFollow() {
       </Form.Item>
       <Form.Item label='状态' name='orderStatus'>
         <Select
-            defaultValue='全部'
           style={{
             width: 100,
           }}
@@ -348,6 +262,92 @@ function OrderFollow() {
       </Form.Item>
     </Form>
   )
+})
+
+function OrderFollow() {
+
+  const [advanceChecked, toggleAdvance] = useState(false)
+  const [searchCriteria, setSearchCriteria] = useState({
+    type: 'today',
+    orderStatus: '新状态',
+    orderNumber: '订单号',
+    orderLabel: '订单标签',
+    startDate: '走团时间'
+  })
+
+  const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
+
+  const handleSubmit = useCallback((criteria) => {
+    console.info('onSubmit.searchCriteria: ')
+    console.info(criteria)
+    setSearchCriteria({
+      ...criteria,
+      type: 'advance'
+    })
+  }, [])
+
+  useEffect(() => {
+  }, [])
+
+  return (
+    <Spin spinning={false} delay={500}>
+      <Space direction='vertical' style={{ width: '100%' }}>
+        <Row gutter={[16, 16]} justify='start' align='middle'>
+          <Col span={10}>
+            <Radio.Group
+              options={[
+                { label: '今日任务', value: 'today' },
+                { label: '潜力客户', value: 'star' },
+                { label: '重点订单', value: 'important' },
+                { label: '成行', value: 'myfavorites' },
+                { label: '走团中', value: 'ing' },
+                { label: '走团后一月', value: 'lastMonth' }
+              ]}
+              value={searchCriteria.type}
+              onChange={({ target: { value } }) => {
+                setSearchCriteria({
+                  ...searchCriteria,
+                  type: value
+                })
+              }}
+              optionType='button'
+              buttonStyle='solid'
+              disabled={advanceChecked}
+            />
+          </Col>
+          <Col span={4}>
+            <Switch checkedChildren='高级查询' unCheckedChildren='高级查询'
+              defaultChecked={false}
+              onChange={() => { toggleAdvance(!advanceChecked) }} />
+          </Col>
+        </Row>
+        <Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
+        />
+      </Space>
+      <Divider plain orientation='left'></Divider>
+      <Space
+        direction='vertical'
+        size='middle'
+        style={{
+          display: 'flex',
+        }}
+      >
+        {orderListMemo}
+      </Space>
+    </Spin>
+  )
+
+  function OrderList({ searchCriteria }) {
+
+    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
+    console.info(countryList)
+    console.info('OrderList.searchCriteria: ')
+    console.info(searchCriteria)
+    return (
+      <>
+        <Table dataSource={dataSource} columns={columns} />
+      </>
+    )
   }
 }