Refresh search list after modification

src/components/EditorSidePanel/TablesTab/SearchBar.jsx

@@ -1,30 +1,23 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
-import { useSelect, useTables } from "../../../hooks";
+import { useSelect } from "../../../hooks";
 import { AutoComplete } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
 
-export default function SearchBar() {
+export default function SearchBar({ tables }) {
-  const { tables } = useTables();
   const { setSelectedElement } = useSelect();
   const [searchText, setSearchText] = useState("");
-  const [filteredResult, setFilteredResult] = useState(
+  const filteredTable = useMemo(
-    tables.map((t) => t.name)
+    () => tables.map((t) => t.name).filter((i) => i.includes(searchText)),
+    [tables, searchText],
   );
 
-  const handleStringSearch = (value) => {
-    setFilteredResult(
-      tables.map((t) => t.name).filter((i) => i.includes(value))
-    );
-  };
-
   return (
     <AutoComplete
-      data={filteredResult}
+      data={filteredTable}
       value={searchText}
       showClear
       prefix={<IconSearch />}
       placeholder="Search..."
-      onSearch={(v) => handleStringSearch(v)}
       emptyContent={<div className="p-3 popover-theme">No tables found</div>}
       onChange={(v) => setSearchText(v)}
       onSelect={(v) => {

src/components/EditorSidePanel/TablesTab/TablesTab.jsx

@@ -13,7 +13,7 @@ export default function TablesTab() {
     <>
       <Row gutter={6}>
         <Col span={16}>
-          <SearchBar />
+          <SearchBar tables={tables} />
         </Col>
         <Col span={8}>
           <Button icon={<IconPlus />} block onClick={() => addTable(true)}>