您在这里所做的是获取产品列表并根据查询字符串对其进行过滤，然后使用过滤后的列表来呈现 UI。因此，理想情况下， yourfilteredList只是基于您的queryString和的派生状态productList。因此，您可以filterProducts从 useEffect 中删除并将其移到外面。这样它就会在状态发生变化时运行。

function filterProducts (productName = '', productList = []) {
  return productName.trim().length > 0 ? productList.filter((prod)=> {
    return prod.title === productName;
  }); : productList
}

function HomePage () {
  const [productList, setProductList] = useState([]);
  const [queryString, setQueryString] = useState('');
 


  useEffect(() => {
    if (queryString.trim() === "") {
      Axios.get("http://localhost:3001/api/product/get-all").then((data) => {
        setProductList(data.data);
      });
    }
  }, [queryString]);

  // query products is the derived state 
  const queryProducts = filterProducts(queryString, productList);

  // Now instead of using productList to render something use the queryProducts
  return (
    {queryProducts.map(() => {
      ..... 
    })}
  )

如果您希望filterProducts仅在更改时运行，queryString或者productList您可以将其包装在 useMemo 中

const queryProducts = React.useMemo(() => filterProducts(queryString, productList), [queryString, productList]);

当您在 useEffect 钩子中使用 setState 函数同时将该 setState 函数的状态作为 useEffect 钩子的依赖项之一时，您将获得这种递归效果，最终无限地重新渲染您的组件。

因此，首先我们必须从 useEffect 中删除 productList。然后，我们可以使用一个函数来更新您的状态而不是陈旧的更新（就像您在示例中所做的那样）。

function filterProducts (productName, productList) {
  const queryProducts = productList.filter((prod)=> {
    return prod.title === productName;
  });
  return queryProducts;
}

function HomePage () {
  const [productList, setProductList] = useState([]);
  const [popupTrigger, setPopupTrigger] = useState('');
  const [productDeleteId, setProductDeleteId] = useState('');
  const [queryString, setQueryString] = useState('');
  let history = useHistory();


  useEffect(() => {
    if (queryString.trim() === "") {
      Axios.get("http://localhost:3001/api/product/get-all").then((data) => {
        setProductList(data.data);
      });
      return;
    }

    setProductList(prevProductList => {
        return filterProducts(queryString, prevProductList)
    });
  }, [queryString]);

现在，您仍然可以访问您的过滤器的 productList，但您不必将它包含在您的依赖项中，它应该负责无限重新渲染。

我建议更改一些代码。

1. 我会将始终立即反映用户输入的状态与表示发送到后端的查询的状态分开。我会在两个状态之间添加一个去抖动。像这样的东西：

const [query, setQuery] = useState('');
const [userInput, setUserInput] = useState('');
useDebounce(userInput, setQuery, 750);

2. 我将拆分从后端返回的原始数据和刚刚从中派生的过滤数据

const [products, setProducts] = useState([]);
const [filteredProducts, setFilteredProducts] = useState([]);

3. 我会拆分useEffect而不是将不同的关注点混合在一起（没有规定你不能有多个关注点useEffect）

useEffect(() => {
    if (query.trim() === '') {
      Axios
        .get("http://localhost:3001/api/product/get-all")
        .then((data) => { setProducts(data.data) });
    }
  }, [query]);

useEffect(
    () => setFilteredProducts(filterProducts(userInput, products)),
    [userInput, products]
);