.1502411993651747:740fa95d9f970aa75d2473c225c0d0b1_69f4a548dc48703ced6cd200.69f4acbbdc48703ced6cd2c7.69f4acbb8da48bf202849959:Trae CN.T(2026/5/1 21:38:03)

src/App.js

@@ -22,16 +22,9 @@ function App() {
             <Navbar />
 
             <main className='container mx-auto px-3 pb-12'>
+              <Alert />
               <Routes>
-                <Route
-                  path='/'
-                  element={
-                    <>
-                      <Alert />
-                      <Home />
-                    </>
-                  }
-                />
+                <Route path='/' element={<Home />} />
                 <Route path='/about' element={<About />} />
                 <Route path='/user/:login' element={<User />} />
                 <Route path='/notfound' element={<NotFound />} />

src/components/users/UserResults.jsx

@@ -6,17 +6,17 @@ import GithubContext from '../../context/github/GithubContext'
 function UserResults() {
   const { users, loading } = useContext(GithubContext)
 
-  if (!loading) {
-    return (
-      <div className='grid grid-cols-1 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2'>
-        {users.map((user) => (
-          <UserItem key={user.id} user={user} />
-        ))}
-      </div>
-    )
-  } else {
+  if (loading) {
     return <Spinner />
   }
+
+  return (
+    <div className='grid grid-cols-1 gap-8 xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2'>
+      {users.map((user) => (
+        <UserItem key={user.id} user={user} />
+      ))}
+    </div>
+  )
 }
 
 export default UserResults

src/components/users/UserSearch.jsx

@@ -18,8 +18,17 @@ function UserSearch() {
       setAlert('Please enter something', 'error')
     } else {
       dispatch({ type: 'SET_LOADING' })
-      const users = await searchUsers(text)
-      dispatch({ type: 'GET_USERS', payload: users })
+      try {
+        const users = await searchUsers(text)
+        dispatch({ type: 'GET_USERS', payload: users })
+
+        if (users.length === 0) {
+          setAlert('未找到匹配的用户，请尝试其他关键词', 'error')
+        }
+      } catch (error) {
+        dispatch({ type: 'SET_ERROR', payload: error.message })
+        setAlert(error.message, 'error')
+      }
 
       setText('')
     }

src/context/github/GithubActions.js

@@ -13,16 +13,28 @@ export const searchUsers = async (text) => {
     q: text,
   })
 
-  const response = await github.get(`/search/users?${params}`)
-  return response.data.items
+  try {
+    const response = await github.get(`/search/users?${params}`)
+    return response.data.items
+  } catch (error) {
+    throw new Error(
+      error.response?.data?.message || '搜索用户失败，请稍后重试'
+    )
+  }
 }
 
 // Get user and repos
 export const getUserAndRepos = async (login) => {
-  const [user, repos] = await Promise.all([
-    github.get(`/users/${login}`),
-    github.get(`/users/${login}/repos`),
-  ])
+  try {
+    const [user, repos] = await Promise.all([
+      github.get(`/users/${login}`),
+      github.get(`/users/${login}/repos`),
+    ])
 
-  return { user: user.data, repos: repos.data }
+    return { user: user.data, repos: repos.data }
+  } catch (error) {
+    throw new Error(
+      error.response?.data?.message || '获取用户信息失败，请稍后重试'
+    )
+  }
 }

src/context/github/GithubContext.js

@@ -9,6 +9,7 @@ export const GithubProvider = ({ children }) => {
     user: {},
     repos: [],
     loading: false,
+    error: null,
   }
 
   const [state, dispatch] = useReducer(githubReducer, initialState)

src/context/github/GithubReducer.js

@@ -5,23 +5,38 @@ const githubReducer = (state, action) => {
         ...state,
         users: action.payload,
         loading: false,
+        error: null,
       }
     case 'GET_USER_AND_REPOS':
       return {
         ...state,
         user: action.payload.user,
         repos: action.payload.repos,
         loading: false,
+        error: null,
       }
     case 'SET_LOADING':
       return {
         ...state,
         loading: true,
+        error: null,
       }
     case 'CLEAR_USERS':
       return {
         ...state,
         users: [],
+        error: null,
+      }
+    case 'SET_ERROR':
+      return {
+        ...state,
+        error: action.payload,
+        loading: false,
+      }
+    case 'CLEAR_ERROR':
+      return {
+        ...state,
+        error: null,
       }
     default:
       return state

src/pages/User.jsx

@@ -4,22 +4,29 @@ import { useParams, Link } from 'react-router-dom'
 import Spinner from '../components/layout/Spinner'
 import RepoList from '../components/repos/RepoList'
 import GithubContext from '../context/github/GithubContext'
+import AlertContext from '../context/alert/AlertContext'
 import { getUserAndRepos } from '../context/github/GithubActions'
 
 function User() {
   const { user, loading, repos, dispatch } = useContext(GithubContext)
+  const { setAlert } = useContext(AlertContext)
 
   const params = useParams()
 
   useEffect(() => {
     dispatch({ type: 'SET_LOADING' })
     const getUserData = async () => {
-      const userData = await getUserAndRepos(params.login)
-      dispatch({ type: 'GET_USER_AND_REPOS', payload: userData })
+      try {
+        const userData = await getUserAndRepos(params.login)
+        dispatch({ type: 'GET_USER_AND_REPOS', payload: userData })
+      } catch (err) {
+        dispatch({ type: 'SET_ERROR', payload: err.message })
+        setAlert(err.message, 'error')
+      }
     }
 
     getUserData()
-  }, [dispatch, params.login])
+  }, [dispatch, params.login, setAlert])
 
   const {
     name,