From d28a94d55ddd6e29f3a544464d58ded9b460a8a9 Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Thu, 13 Mar 2025 15:04:42 +0800
Subject: [PATCH] Refactor AsyncSearch component for better key management

---
 lightrag_webui/src/components/ui/AsyncSearch.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lightrag_webui/src/components/ui/AsyncSearch.tsx b/lightrag_webui/src/components/ui/AsyncSearch.tsx
index 339c0313..b1c25fe9 100644
--- a/lightrag_webui/src/components/ui/AsyncSearch.tsx
+++ b/lightrag_webui/src/components/ui/AsyncSearch.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react'
+import React, { useState, useEffect, useCallback } from 'react'
 import { Loader2 } from 'lucide-react'
 import { useDebounce } from '@/hooks/useDebounce'
 
@@ -204,7 +204,7 @@ export function AsyncSearch<T>({
             ))}
           <CommandGroup>
             {options.map((option, idx) => (
-              <>
+              <React.Fragment key={getOptionValue(option) + `-fragment-${idx}`}>
                 <CommandItem
                   key={getOptionValue(option) + `${idx}`}
                   value={getOptionValue(option)}
@@ -215,9 +215,9 @@ export function AsyncSearch<T>({
                   {renderOption(option)}
                 </CommandItem>
                 {idx !== options.length - 1 && (
-                  <div key={idx} className="bg-foreground/10 h-[1px]" />
+                  <div key={`divider-${idx}`} className="bg-foreground/10 h-[1px]" />
                 )}
-              </>
+              </React.Fragment>
             ))}
           </CommandGroup>
         </CommandList>