Javascript 带有React查询的搜索框

我正试图通过

文本

实现产品搜索。使用

react query

获取数据。下面的实现正在工作，但我觉得不合适。让我知道我是否做得过火了，是否有一个更简单的解决方案使用

react query

import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useQueryClient } from 'react-query';
import ProductCard from '@/components/cards/ProductCard';
import { useQueryProducts } from '@/hooks/query/product';
import { selectSearch } from '@/store/search';

// function fetchProductsByFilter(text){}

const Shop = ({ count }) => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);

  const { text } = useSelector(selectSearch);

  const productsQuery = useQueryProducts(count);

  useEffect(() => {
    setProducts(productsQuery.data);
    setLoading(false);
  }, []);

  const queryClient = useQueryClient();

  useEffect(() => {
    const delayed = setTimeout(() => {
      queryClient.prefetchQuery(['searchProductsByText'], async () => {
        if (text) {
          const data = await fetchProductsByFilter(text);
          setProducts(data);
          setLoading(false);
          return data;
        }
      });
    }, 300);
    return () => clearTimeout(delayed);
  }, [text]);

  return (
    <div className="container-fluid">
      <div className="row">
        <div className="col-md-3">search/filter menu</div>

        <div className="col-md-9">
          {loading ? (
            <h4 className="text-danger">Loading...</h4>
          ) : (
            <h4 className="text-danger">Products</h4>
          )}

          {products.length < 1 && <p>No products found</p>}

          <div className="row pb-5">
            {products.map((item) => (
              <div key={item._id} className="col-md-4 mt-3">
                <ProductCard product={item} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// async function getServerSideProps(context) {}

export default Shop;

从'react'导入{useffect，useState}；
从'react redux'导入{useSelector}；
从“react query”导入{useQueryClient}；
从“@/components/cards/ProductCard”导入ProductCard；
从“@/hooks/query/product”导入{useQueryProducts}；
从“@/store/search”导入{selectSearch}；
//函数fetchProductsByFilter（文本）{}
常量商店=（{count}）=>{
const[products，setProducts]=useState（[]）；
const[loading，setLoading]=useState（true）；
const{text}=useSelector（selectSearch）；
const productsQuery=useQueryProducts（计数）；
useffect（（）=>{
setProducts（productsQuery.data）；
设置加载（假）；
}, []);
const queryClient=useQueryClient（）；
useffect（（）=>{
const delayed=setTimeout（（）=>{
queryClient.prefetchQuery（['searchProductsByText']，异步（）=>{
如果（文本）{
const data=wait fetchProductsByFilter（文本）；
产品（数据）；
设置加载（假）；
返回数据；
}
});
}, 300);
return（）=>clearTimeout（延迟）；
}，[正文]；
返回(
搜索/筛选菜单
{加载(
加载。。。
) : (
产品
)}
{products.length<1&&未找到任何产品
}
{products.map（（项目）=>(
))}
);
};
//异步函数getServerSideProps（上下文）{}
出口默认商店；

我觉得它不太习惯。对于react query，使用过滤器的关键是将它们放入查询键中。由于react query会在每次键更改时重新蚀刻，因此每次更改过滤器时都会得到一个重新蚀刻，这通常是您想要的。这是一种非常陈述性的做事方式。根本不需要任何效果

如果在从“选择”或单击“应用”按钮中选择某项内容时发生这种情况，则您只需要：

const [filter, setFilter] = React.useState(undefined)
const { data, isLoading } = useQuery(
  ['products', filter], 
  () => fetchProducts(filter)
  { enabled: Boolean(filter) }
)

在这里，我另外禁用了查询，只要过滤器是

未定义的

——只要我们调用

setFilter

，抓取就会开始

---

如果需要在文本字段中键入内容，我建议进行一些去抖动处理，以避免引发太多请求。这是非常好的。您仍然拥有

useState

，但您将使用取消公告的值进行查询：

const [filter, setFilter] = React.useState(undefined)
const debouncedFilter = useDebounce(filter, 500);
const { data, isLoading } = useQuery(
  ['products', debouncedFilter], 
  () => fetchProducts(debouncedFilter)
  { enabled: Boolean(debouncedFilter) }
)

---

哇，太酷了。非常感谢。从你身上学到了很多。