Refactor AsyncSearch component for better key management

This commit is contained in:
yangdx
2025-03-13 15:04:42 +08:00
parent 20b8a9d7e9
commit d28a94d55d

View File

@@ -1,4 +1,4 @@
import { useState, useEffect, useCallback } from 'react' import React, { useState, useEffect, useCallback } from 'react'
import { Loader2 } from 'lucide-react' import { Loader2 } from 'lucide-react'
import { useDebounce } from '@/hooks/useDebounce' import { useDebounce } from '@/hooks/useDebounce'
@@ -204,7 +204,7 @@ export function AsyncSearch<T>({
))} ))}
<CommandGroup> <CommandGroup>
{options.map((option, idx) => ( {options.map((option, idx) => (
<> <React.Fragment key={getOptionValue(option) + `-fragment-${idx}`}>
<CommandItem <CommandItem
key={getOptionValue(option) + `${idx}`} key={getOptionValue(option) + `${idx}`}
value={getOptionValue(option)} value={getOptionValue(option)}
@@ -215,9 +215,9 @@ export function AsyncSearch<T>({
{renderOption(option)} {renderOption(option)}
</CommandItem> </CommandItem>
{idx !== options.length - 1 && ( {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> </CommandGroup>
</CommandList> </CommandList>