From b6b14289189fc27cc07a96f2bfee1f3d0913f795 Mon Sep 17 00:00:00 2001
From: elliotxx <951376975@qq.com>
Date: Tue, 17 Dec 2024 11:22:02 +0800
Subject: [PATCH] fix(ui): resolve invalid hook call in search result page
 (#669)

## What type of PR is this?

/kind bug

## What this PR does / why we need it:

This PR resolves an invalid hook call in the search result page by
moving the `useTranslation` hook inside function components, fixing a
runtime error caused by incorrect hook usage. It ensures that hooks are
only called within React function components.

## Which issue(s) this PR fixes:

Fixes #
---
 ui/src/pages/result/index.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/result/index.tsx b/ui/src/pages/result/index.tsx
index 468482dd..ef057d8e 100644
--- a/ui/src/pages/result/index.tsx
+++ b/ui/src/pages/result/index.tsx
@@ -32,7 +32,6 @@ import { useAxios } from '@/utils/request'
 import styles from './styles.module.less'
 
 const { Search } = Input
-const { t } = useTranslation()
 const Option = AutoComplete.Option
 
 export const CustomDropdown = props => {
@@ -47,9 +46,7 @@ export const CustomDropdown = props => {
         >
           <Option value={option.value}>
             <span>{option.value}</span> -{' '}
-            <span style={{ color: '#999' }}>
-              {option.value || t('DefaultTag')}
-            </span>
+            <span style={{ color: '#999' }}>{option.value || <></>}</span>
           </Option>
         </div>
       ))}
@@ -58,7 +55,6 @@ export const CustomDropdown = props => {
 }
 
 const Result = () => {
-  const { t } = useTranslation()
   const location = useLocation()
   const navigate = useNavigate()
   const [pageData, setPageData] = useState<any>()
@@ -76,6 +72,8 @@ const Result = () => {
     getHistoryList('naturalHistory') || [],
   )
 
+  const { t } = useTranslation()
+
   function cacheNaturalHistory(key, val) {
     const result = cacheHistory(key, val)
     setNaturalOptions(result)