React DebounceInput无法读取键盘输入 用户列表未按搜索词过滤

• 搜索关键词状态仅在Main组件中定义，未和用户列表过滤逻辑关联，整套过滤代码完全缺失
• UsersContext仅存储了原始全量用户数据，未提供过滤后的数据
• UsersList组件直接渲染全量用户数据，未接入任何过滤规则

1. 修改Users上下文，增加搜索状态和过滤逻辑 #

import React, {useState, useEffect, useMemo} from 'react';
import axios from 'axios';

type Person = {
    name:string;
    username:string;
}
type UsersContextType = {
  filteredUsers: Person[];
  setSearchKey: (key: string) => void;
}

// 调整上下文类型
export const UsersContext = React.createContext<UsersContextType>({
  filteredUsers: [],
  setSearchKey: () => {}
});

const UsersProvider:React.FC= ({children}) => {
    const [users, setUsers] = useState<Person[]>([]); 
    // 新增搜索关键词状态
    const [searchKey, setSearchKey] = useState('');
    // 计算过滤后的用户列表
    const filteredUsers = useMemo(() => {
      if (!searchKey.trim()) return users;
      const lowerKey = searchKey.toLowerCase();
      return users.filter(user => 
        user.name.toLowerCase().includes(lowerKey) 
        || user.username.toLowerCase().includes(lowerKey)
      )
    }, [users, searchKey])

    useEffect(() => {
        axios
        .get(`https://jsonplaceholder.typicode.com/users`)
        .then((response) =>{
            setUsers(response.data);
        })
        .catch((error) => {
            console.log(error);
        });
    },[]);

    return (
        <UsersContext.Provider value={{filteredUsers, setSearchKey}}>
            {children}
        </UsersContext.Provider>
            
    )
}
export default UsersProvider;

2. 修改UsersList组件，读取过滤后的用户数据 #

import {useContext} from 'react';
import {UsersContext} from '../../contexts/Users'

type Person = {
    name:string;
    username:string;
}
const UsersList: React.FC = () => {
    // 从上下文拿过滤后的用户
    const {filteredUsers} = useContext(UsersContext);

    return(
        <div className="ListHead"> 
            <ol className="list">
                {filteredUsers.map((person) => (
                    <li key={person.name}>
                        <span>{person.name}</span>
                        @{person.username}
                    </li>
            ))}
            </ol>
        </div>
    )}
export default UsersList;

3. 修改Debounce组件，关联上下文的搜索状态更新方法 #

import {useContext} from 'react';
import {DebounceInput} from 'react-debounce-input';
import {UsersContext} from '../../contexts/Users';

const Debounce:React.FC = () => {
  const {setSearchKey} = useContext(UsersContext);
  return(
        <DebounceInput
          onChange={(e) => setSearchKey(e.target.value)}             
          debounceTimeout={500}                 
          className="SearchInput"                  
          placeholder="Search by user name..."                  
        />      
  )
}
export default Debounce

4. 简化Main组件代码 #

const Main:React.FC= () => {
    return (
    <div>
        <div>
             <Header/>
        </div>
            <UsersProvider>
                <UsersList />
                <Debounce />
            </UsersProvider>
        </div>
    )
}

内容的提问来源于stack exchange，提问作者user16016420