React onchange事件搜索api onChange未正常工作

Question

我在我的数据库中搜索用户的关键字从用户。我将值保持在我的状态，并试图在onChnge()事件上调用API，但它冻结了我的输入字段，我不能在输入字段中添加或删除字符，我在onChange()之后立即调用API。

我尝试过onSubmit，它的效果很不错，但我想在每次击键时调用它。

const CardAddChat = () => {
  const initialState = {
    private: true,
    search: "",
    usersList: [],
    selectedPersons: [],
  };

  const [state, setState] = useState(initialState);

  const handleChange = (e) => {
    setState({ ...state, search: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      let res = await axios.get(`/api/users?term=${state.search}`);
      setState({ ...state, usersList: res.data.data });
    } catch (error) {
      console.error(error);
    }
  };

  const handleGroupChange = () => {
    setState({ ...state, private: !state.private });
  };

  return (
    <>
      <div className=" w-96 flex flex-col bg-blueGray-200 ">
        <h1 className="text-2xl p-3  border-b">
          {state.private ? "New Private Chat" : "New Group Chat"}
        </h1>

        <div className="flex-none  pb-2  ">
          <form
            onSubmit={handleSubmit}
            class="pt-2 relative mx-auto w-full px-2 text-gray-600 flex items-center"
          >
            <input
              class="px-3 bg-white h-10 rounded-full text-xs focus:outline-none w-full pr-10"
              type="search"
              name="search"
              value={state.search}
              onChange={handleChange}
              placeholder="Search for messages or users.."
            />

为了临时起见，我调用了onSubmit接口，但无论如何都要在onChange触发。提前谢谢。

Answer 1

如果您已经获取了所有用户，那么您只需要过滤列表，而不是获取已经获取的列表的子集。

如果您必须通过onChange处理程序获取用户，请考虑使用lodash's debounce function -它将一直等到输入停止一小段时间。