为什么我的搜索栏结果在我使用 React API 键入时没有动态显示

Question

我有一个搜索栏，它获取输入值并通过 axios.get(/products/search?q={} ...) 和 [=44 将其发送到 API =]是可能产品的列表。

从技术上讲，returned 列表会在用户在搜索框中键入内容时显示。这对我不起作用。

如果我将应用 return 作为搜索输入查询，它会按预期逐个字母地显示它，但是当我尝试 return 数据地图时，它不会仅在重新加载页面时动态更新结果。

const SearchBar = () => {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState("");

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(`/products/search?q=${query}`);
        console.log(data.results);
        setData(response.data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, []);

  const handleFilter = (event) => {
    event.preventDefault();
    const search = event.target.value
      .toLowerCase()
      .normalize("NFD") //.normalize and .replace help by ignoring diacriticals from the data field
      .replace(/[\u0300-\u036f]/g, "");

// HERE IS WHERE I SET THE query FOR THE API
    setQuery(search);
  };

  return (
    // the Search box
    <div className="search">

      <div className="searchInputs">
        <input type="text" placeholder="Search ..." onChange={handleFilter} />
      </div>

      {/* search result suggestions list */}

      {query.length != 0 && (
        <div className="dataResult">
          {data.results.map((product, index) => {
            return (
              <a className="dataItem" key={product._id}>
                {product.name}
              </a>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default SearchBar;

搜索啤酒：

对 React 组件进行任意更改并保存：

再次随机修改并保存到react组件

镜像输入 onChange，动态工作

Answer 1

由于您对查询进行了更改，您需要在 useEffect 挂钩中添加 [query] 作为第二个参数，以便在每次 query 更改时使组件 re-render。

Answer 2

您是否尝试将 query 添加为 useEffect 的依赖项？

像这样：

useEffect(() => {
    // do something
}, [query]);

如果可行，请小心，因为每次用户写入任何字符时，它都会发送请求。最好使用一些弹跳或某种方式不要立即运行函数，而是在 2 秒后。（setTimeout 可能）

为什么我的搜索栏结果在我使用 React API 键入时没有动态显示

Why are my search bar results not displaying dynamically as I type using React API

javascript

search

reactjs

axios