React hooks 实时搜索更新数据指南

前端

2023-12-23 14:38:18

嗨，大家好！欢迎阅读我的最新博文。在本文中，我将分享如何使用 React hooks 实现实时搜索更新数据。

实时搜索

实时搜索是一种允许用户在输入时立即查看结果的搜索方法。这对于具有大量数据的应用程序非常有用，因为它可以帮助用户快速找到所需的内容。

在 React 中，可以使用 hooks 来实现实时搜索。hooks 是 React 16.8 中引入的一个新特性，它允许你将状态和其它 React 特性添加到函数组件中。

实现步骤

要使用 hooks 实现实时搜索，你需要执行以下步骤：

创建一个状态变量来存储搜索查询。
创建一个函数来处理搜索查询的变化。
在输入框中使用 onChange 事件侦听器来调用处理函数。
在处理函数中，使用 useState hook 来更新搜索查询状态变量。
使用 useEffect hook 来监听搜索查询状态变量的变化。
在 useEffect hook 中，使用 React 的 fetch API 来发送搜索请求。
在 useEffect hook 中，使用 setState hook 来更新搜索结果状态变量。

示例代码

import React, { useState, useEffect } from "react";

const Search = () => {
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(
        `https://example.com/search?q=${searchQuery}`
      );
      const data = await response.json();
      setSearchResults(data);
    };

    fetchData();
  }, [searchQuery]);

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={(e) => setSearchQuery(e.target.value)}
      />
      <ul>
        {searchResults.map((result) => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default Search;