列表联调

src/pages/search/index.tsx

@@ -1,4 +1,4 @@
-import CustomerNavbarBack from "@/components/CustomerNavbarBack";
+// import CustomerNavbarBack from "@/components/CustomerNavbarBack";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import { useEffect, useMemo, useRef } from "react";
@@ -18,11 +18,13 @@ const ListSearch = () => {
     suggestionList,
     isShowSuggestion,
   } = useListState() || {};
-
   const ref = useRef<any>(null);
 
   useEffect(() => {
     getSearchHistory();
+    return () => {
+      handleClear();
+    };
   }, []);
 
   useEffect(() => {
@@ -35,6 +37,12 @@ const ListSearch = () => {
     return new RegExp(searchValue, "gi");
   }, [searchValue]);
 
+  // 是否显示清空图标
+  const isShowClearIcon = searchValue && searchValue?.length > 0;
+
+  // 是否显示搜索历史
+  const isShowHistory = searchHistory && searchHistory?.length > 0;
+
   /**
    * @description 输入
    * @param value
@@ -54,16 +62,16 @@ const ListSearch = () => {
    * @description 点击清空输入内容
    */
   const handleClear = () => {
-    updateState({ searchValue: "" });
+    updateState({ searchValue: "", isShowSuggestion: false });
   };
 
   /**
    * @description 点击历史搜索
    * @param value
    */
-  const handleHistoryClick = (value: string) => {
-    updateState({ searchValue: value });
-    handleSearch();
+  const handleHistoryClick = (item: { id: number; title: string }) => {
+    updateState({ searchValue: item?.title });
+    handleSearch(item?.title);
   };
 
   /**
@@ -81,25 +89,21 @@ const ListSearch = () => {
       searchValue: val,
       isShowSuggestion: false,
     });
-    handleSearch();
+    handleSearch(val);
   };
 
   /**
    * @description 点击搜索
    */
-  const handleSearch = () => {
+  const handleSearch = (val?: string) => {
+    if (!val) {
+      return;
+    }
     Taro.navigateTo({
       url: `/pages/searchResult/index`,
     });
   };
 
-  // 是否显示清空图标
-  const isShowClearIcon = searchValue && searchValue?.length > 0;
-
-  // 是否显示搜索历史
-  const isShowHistory =
-    !isShowClearIcon && searchHistory && searchHistory?.length > 0;
-
   return (
     <>
       <View className="listSearchContainer">
@@ -125,7 +129,7 @@ const ListSearch = () => {
               />
             )}
             <View className="searchLine" />
-            <Text className="searchText" onClick={handleSearch}>
+            <Text className="searchText" onClick={() => handleSearch(searchValue)}>
               搜索
             </Text>
           </View>
@@ -180,12 +184,15 @@ const ListSearch = () => {
             {isShowHistory && (
               <View className="historySearchList">
                 {(searchHistory || [])?.map((item) => {
+                  if (!item?.title) {
+                    return null;
+                  }
                   return (
                     <Text
                       className="historySearchItem"
                       onClick={() => handleHistoryClick(item)}
                     >
-                      {item}
+                      {item?.title}
                     </Text>
                   );
                 })}