解决子组件不刷新

src/views/OrderFollow.jsx

@@ -181,11 +181,10 @@ const columns = [
   },
 ]
 
-const AdvanceSearchForm = memo(function AdvanceSearch({ onSubmit }) {
+const AdvanceSearchForm = memo(function ({ onSubmit }) {
   const [form] = Form.useForm()
-  console.info('AdvanceSearch: ')
   function handleSubmit(values) {
-    onSubmit(values);
+    onSubmit(values)
   }
   return (
     <Form
@@ -278,8 +277,6 @@ function OrderFollow() {
   const orderListMemo = useMemo(() => <OrderList searchCriteria={searchCriteria} />, [searchCriteria])
 
   const handleSubmit = useCallback((criteria) => {
-    console.info('onSubmit.searchCriteria: ')
-    console.info(criteria)
     setSearchCriteria({
       ...criteria,
       type: 'advance'
@@ -292,7 +289,7 @@ function OrderFollow() {
   return (
     <>
       <Space direction='vertical' size='large' style={{ width: '100%' }}>
-        <Flex gap='large' justify='start' align='center' horizontal>
+        <Flex gap='large' justify='start' align='center' horizontal='true'>
           <Radio.Group
             options={[
               { label: '今日任务', value: 'today' },
@@ -322,18 +319,17 @@ function OrderFollow() {
         />
       </Space>
       <Divider plain orientation='left'></Divider>
-      {orderListMemo}
+      {/* {orderListMemo} */}
+      <OrderList searchCriteria={searchCriteria} />
     </>
   )
 
   function OrderList({ searchCriteria }) {
-
-    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
-    console.info(countryList)
-    console.info('OrderList.searchCriteria: ')
     console.info(searchCriteria)
+    const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
+  
     return (
-      <Table loading={countryList === null} dataSource={dataSource} columns={columns} />
+      <Table loading={countryList === null} dataSource={countryList === null ? null : dataSource} columns={columns} />
     )
   }
 }

src/views/SalesManagement.jsx

@@ -1,17 +1,16 @@
 import { useNavigate } from 'react-router-dom'
-import { useRef, useEffect, useState } from 'react'
-import { Row, Col, Divider, Table , Card, Button, Input, 
-  Space, Empty, Radio, Select, DatePicker, Spin, List, Avatar
+import { memo, useMemo, useCallback, useEffect, useState } from 'react'
+import {
+  Row, Col, Divider, Table, Card, Button, Input,
+  Space, Segmented, Radio, Select, Flex, Spin, Form, Switch, DatePicker, List, Avatar
 } from 'antd'
 import {
   StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined, ImportOutlined
 } from '@ant-design/icons'
 
-import {useFormInput} from '@/hooks/useFormInput'
 import {useGetJson} from '@/hooks/userFetch'
 
-const { Search } = Input;
-const { RangePicker } = DatePicker;
+const { RangePicker } = DatePicker
 
 const dataSource = [
   {
@@ -72,70 +71,157 @@ const dataSource = [
   },
 ];
 
-const columns = [
-  {
-    title: '顾问',
-    dataIndex: 'travelAdvisor',
-    key: 'travelAdvisor',
-  },
-  {
-    title: '客人名单',
-    dataIndex: 'contactList',
-    key: 'contactList',
-  },
-  {
-    title: '重点订单',
-    dataIndex: 'important',
-    key: 'important',
-  },
-  {
-    title: '潜力客户',
-    dataIndex: 'star',
-    key: 'star',
-  },
-  {
-    title: '成型',
-    dataIndex: 'ing',
-    key: 'ing',
-  },
-];
+const AdvanceSearchForm = memo(function ({ onSubmit }) {
+  console.info('AdvanceSearchForm')
+  const [form] = Form.useForm()
+  function handleSubmit(values) {
+    if (onSubmit) 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>
+  )
+})
+
+const SalesTable = function({formValues}) {
+  console.info('SalesTable')
+  console.info(formValues)
+  
+  const [salesData, setSalesData] = useState([])
+
+  useEffect(() => {
+    console.info('SalesTable.useEffect')
+    // setSalesData([]) // 可改为设置加载状态
+    fetch('https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList')
+      .then(response => response.json())
+      .then(json => {
+        if (salesData.length > 0) {
+          const timeString = new Date().toISOString()
+          salesData[0].travelAdvisor =  timeString;
+          setSalesData(salesData)
+        } else {
+          setSalesData([...dataSource])
+        }
+      })
+  }, [formValues])
+    
+  const columns = [
+    {
+      title: '顾问',
+      dataIndex: 'travelAdvisor',
+      key: 'travelAdvisor',
+    },
+    {
+      title: '客人名单',
+      dataIndex: 'contactList',
+      key: 'contactList',
+    },
+    {
+      title: '重点订单',
+      dataIndex: 'important',
+      key: 'important',
+    },
+    {
+      title: '潜力客户',
+      dataIndex: 'star',
+      key: 'star',
+    },
+    {
+      title: '成型',
+      dataIndex: 'ing',
+      key: 'ing',
+    },
+  ]
+  return (
+    <Table dataSource={salesData} columns={columns} />
+  )
+}
 
 function SalesManagement() {
 
-  const keywordProps = useFormInput('')
-  const countryList = useGetJson(`https://p9axztuwd7x8a7.mycht.cn/service-InfoSys/InfoSys/GetCountryList`)
-  console.info(countryList)
+  const [formValues, setFormValues] = useState({})
 
-  useEffect(() => {
+  const handleSubmit = useCallback((values) => {
+    setFormValues({...values})
   }, [])
-  
+    
   return (
-    <Spin spinning={false} delay={500}>
-      <Space direction='vertical' style={{ width: '100%' }}>
-        <Row gutter={[16, 16]} justify='start' align='middle'>
-        <Col span={6}>
-        <RangePicker />
-          </Col>
-        <Col span={6}>
-        <Input placeholder='关键词' {...keywordProps} />
-          </Col>
-        <Col span={6}>
-          <Button icon={<ImportOutlined />} onClick={() => {console.info(keywordProps.value)}}>OK</Button>
-          <Button icon={<ImportOutlined />}>导入联系人</Button>
-          </Col>
-        </Row>
-      </Space>
+    <>
+      <AdvanceSearchForm onSubmit={handleSubmit} />
       <Divider plain orientation='left'></Divider>
-      <Space
-        direction='vertical'
-        size='middle'
-        style={{
-          display: 'flex',
-        }}
-      >
-        <Table dataSource={dataSource} columns={columns} />
-      </Space>
-    </Spin>
+      <SalesTable formValues={formValues} />
+    </>
   )
 }