去抖输入不读取键盘信息

Question

我需要 DebounceInput 来从我的键盘读取信息，但是当我输入 Ervin 时，整个列表都会保留，而不仅仅是 Ervin，因为它以前可以工作。我真的不知道我哪里错了。我知道 Debounce 应该等到用户停止输入，但即使等待一分钟也没有任何改变。

这是我的文件：

去抖输入：

import {DebounceInput} from 'react-debounce-input';
type Props ={
   onChange:Function;
}
const Debounce:React.FC<Props> = ({onChange}) => {
  return(
        <DebounceInput
          onChange={(e) => onChange(e.target.value)}             
          debounceTimeout={500}                 
          className="SearchInput"                  
          placeholder="Search by user name..."                  
        />      
  )
}
export default Debounce

用户列表：

import {UsersContext} from '../../contexts/Users'
type Props = {
    filteredUsers:Array<Person>;
}
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>
    )}

用户：

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

type Users = Person[];
type Person = {
    name:string;
    username:string;
}

export const UsersContext = React.createContext<Users>([]);
const UsersProvider:React.FC= ({children}) => {
    const [users, setUsers] = useState<Person[]>([]); 
    useEffect(() => {
        axios
        .get(`https://jsonplaceholder.typicode.com/users`)
        .then((response) =>{
            setUsers(response.data);
        })
        .catch((error) => {
            console.log(error);
        });
    },[]);

    return (
        <UsersContext.Provider value={users}>
            {children}
        </UsersContext.Provider>
            
    )
}

还有主要的：

const Main:React.FC= () => {
    const [showUser, setShowUser] = useState("");
    return (
    <div>
        <div>
             <Header/>
        </div>
            <UsersProvider>
                <UsersList />
                <Debounce onChange={setShowUser}/>
            </UsersProvider>
        </div>
    )
}

Answer 1

您的去抖动输入除了更改showUser 状态外，不会做任何事情。由于您的用户位于 UsersProvider 中。您可以将 showUser 的值作为道具传递给 UsersProvider 。

const Main:React.FC= () => {
  const [showUser, setShowUser] = useState("");
  return (
  <div>
      <div>
           <Header/>
      </div>
          <UsersProvider searchText={showUser}>
              <UsersList />
              <Debounce onChange={setShowUser}/>
          </UsersProvider>
      </div>
  )
}

现在在您的UsersProvider 中，您可以执行以下操作

type UsersProviderProps = {
  children: React.ReactNode;
  searchText: string;
}

export const UsersContext = React.createContext<Users>([]);
const UsersProvider:React.FC<UsersProviderProps>= ({children, searchText}) => {
    const [users, setUsers] = useState<Person[]>([]);

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

const filteredUsers = useMemo(() => {
  if(searchText.trim().length > 0 && users.length > 0){
    return users.filter((person) =>
    person.name.toLowerCase().includes(searchText.toLowerCase())
  );
  } else {
  return users;
  }
}, [searchText, users])

    return (
        <UsersContext.Provider value={filteredUsers}>
            {children}
        </UsersContext.Provider>
            
    )
}