ReactJS调用函数一次，如果设置了查询字符串

Question

解释：

在中使用我通过getProducts（）函数基于给定的data，数据包含搜索过滤器和将通过用户更新，因此需要实时观看，例如，数据包含一个{brand：'x'}的对象

const [data, setData] = useState({});

useEffect(() => {
  getProducts(data) // get products via api based on data, if data is clear, it will return all products
    .then(data => {
      //
    });
}, [data]) // watch data in realtime and send it to getProducts()

useEffect(() => {
  getQuery(); // check if there are search querys
}, [])

。 ，它将检查如果在重新加载页面时搜索参数中有任何查询字符串，并且会获取查询字符串并将其设置为data，并且在上面的代码中，如果data get feet Update get Update update update update update update update update update update undive it it it it in the cope> data getProducts（），实际上它更新了产品。

const getQuery = () => {
  let obj_url = new URL(window.location.href);
  let params = obj_url.searchParams;
  let searchParams = new URLSearchParams(params);

  // some other code 
  setData(obj); // get query and set it to data
}

问题：

我注意到URL中有查询字符串时，它将调用getProducts（）两次！好吧，这个代码肯定是这样做的，但是我不想要它，我该如何防止打电话两次？我只想如果没有一次查询字符串一次，如果没有一次。

Answer 1

是的，它将以usestate的初始化为调用，第二次从getQuery上使用useffect上的更新数据。您实际上不需要使用 getQuery函数。您可以直接将来自查询的数据直接设置（初始状态只能在初始渲染上设置，而不是在后续渲染上设置）。

const [data, setData] = useState(getQuery());

useEffect(() => {
  getProducts(data) // get products via api based on data, if data is clear, it will return all products
    .then(data => {
      //
    });
}, [data]) // watch data in realtime and send it to getProducts()

const getQuery = () => {
  let obj_url = new URL(window.location.href);
  let params = obj_url.searchParams;
  let searchParams = new URLSearchParams(params);

  // some other code
  return obj ?? {}
}

Answer 2

在状态初始化中使用该函数的坏主意，您可以以本机方式进行此操作，react> react-router-dom。基于@cristian-florin calina答案，我提供了新答案：

import { useRouter } from 'next/router';

const Router = useRouter();
const [data, setData] = useState(Router.query);

useEffect(() => {
  getProducts(data)
    .then(data => {
      //
    });
}, [data]);

router.query返回所有搜索参数，因此无需调用getQuery 功能。 简单！