优化搜索表单不重复刷新

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,7 +179,90 @@ const columns = [
     dataIndex: 'comment',
     key: 'comment',
   },
-];
+]
+
+const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
+  const [form] = Form.useForm()
+  console.info('AdvanceSearch: ')
+  function handleSubmit(values) {
+    onSubmit(values);
+  }
+  return (
+    <Form
+      layout={'inline'}
+      form={form}
+      initialValues={{orderLabel: '全部'}}
+      onFinish={handleSubmit}
+      style={{
+        maxWidth: 'none',
+      }}
+    >
+      <Form.Item label='标签' name='orderLabel'>
+        <Select
+          style={{
+            width: 100,
+          }}
+          options={[
+            {
+              value: '潜力',
+              label: '潜力',
+            },
+            {
+              value: '重点',
+              label: '重点',
+            },
+            {
+              value: '休眠',
+              label: '休眠',
+            }
+          ]}
+        />
+      </Form.Item>
+      <Form.Item label='状态' name='orderStatus'>
+        <Select
+          style={{
+            width: 100,
+          }}
+          options={[
+            {
+              value: '新订单',
+              label: '新订单',
+            },
+            {
+              value: '报价中',
+              label: '报价中',
+            },
+            {
+              value: '丢失',
+              label: '丢失',
+            },
+            {
+              value: '一催',
+              label: '一催',
+            },
+            {
+              value: '二催',
+              label: '二催',
+            },
+            {
+              value: '三催',
+              label: '三催',
+            },
+          ]}
+        />
+      </Form.Item>
+      <Form.Item label='订单号' name='orderNumber'>
+        <Input placeholder='订单号' allowClear />
+      </Form.Item>
+      <Form.Item label='出发日期' name='startDate'>
+        <RangePicker />
+      </Form.Item>
+      <Form.Item >
+        <Button type='primary' htmlType='submit'>搜索</Button>
+      </Form.Item>
+    </Form>
+  )
+})
 
 function OrderFollow() {
 
@@ -195,6 +277,15 @@ function OrderFollow() {
 
   const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
 
+  const handleSubmit = useCallback((criteria) => {
+    console.info('onSubmit.searchCriteria: ')
+    console.info(criteria)
+    setSearchCriteria({
+      ...criteria,
+      type: 'advance'
+    })
+  }, [])
+
   useEffect(() => {
   }, [])
 
@@ -230,14 +321,7 @@ function OrderFollow() {
               onChange={() => { toggleAdvance(!advanceChecked) }} />
           </Col>
         </Row>
-        <Conditional condition={advanceChecked} whenTrue={<AdvanceSearch onSubmit={(criteria) => {
+        <Conditional condition={advanceChecked} whenTrue={<AdvanceSearchForm onSubmit={handleSubmit} />}
-          console.info('onSubmit.searchCriteria: ')
-          console.info(criteria)
-          setSearchCriteria({
-            ...criteria,
-            type: 'advance'
-          })
-        }} />}
         />
       </Space>
       <Divider plain orientation='left'></Divider>
@@ -265,90 +349,6 @@ function OrderFollow() {
       </>
     )
   }
-
-  function AdvanceSearch({ onSubmit }) {
-    const [form] = Form.useForm()
-    console.info('AdvanceSearch: ')
-    function handleSubmit(values) {
-      onSubmit(values);
-    }
-    return (
-      <Form
-        layout={'inline'}
-        form={form}
-        onFinish={handleSubmit}
-        style={{
-          maxWidth: 'none',
-        }}
-      >
-        <Form.Item label='标签' name='orderLabel'>
-          <Select
-            defaultValue='全部'
-            style={{
-              width: 100,
-            }}
-            options={[
-              {
-                value: '潜力',
-                label: '潜力',
-              },
-              {
-                value: '重点',
-                label: '重点',
-              },
-              {
-                value: '休眠',
-                label: '休眠',
-              }
-            ]}
-          />
-        </Form.Item>
-        <Form.Item label='状态' name='orderStatus'>
-          <Select
-            defaultValue='全部'
-            style={{
-              width: 100,
-            }}
-            options={[
-              {
-                value: '新订单',
-                label: '新订单',
-              },
-              {
-                value: '报价中',
-                label: '报价中',
-              },
-              {
-                value: '丢失',
-                label: '丢失',
-              },
-              {
-                value: '一催',
-                label: '一催',
-              },
-              {
-                value: '二催',
-                label: '二催',
-              },
-              {
-                value: '三催',
-                label: '三催',
-              },
-            ]}
-          />
-        </Form.Item>
-        <Form.Item label='订单号' name='orderNumber'>
-          <Input placeholder='订单号' allowClear />
-        </Form.Item>
-        <Form.Item label='出发日期' name='startDate'>
-          <RangePicker />
-        </Form.Item>
-        <Form.Item >
-          <Button type='primary' htmlType='submit'>搜索</Button>
-        </Form.Item>
-      </Form>
-    )
-  }
 }
 
 export default OrderFollow