4

我有一个选择选项菜单。因此，当用户选择一个选项时，我想使用该选项向服务器发送一个 GET/ 请求，并从服务器接收过滤后的数据。

这可以使用 useEffect(() => {// send the request}, [criteria]) 来实现

因为，useEffect 确保只有在 setCriteria 完成后，请求才会发送到服务器。

但是，我正在使用react-query图书馆。因此，它不允许在useQueryinside中使用useEffect。

结果，请求在 setState 完成之前被发送到服务器。因此，服务器获取先前选择的值，而不是当前选择的值。

改变：

<select
  name="filter"
  value={criteria}
  onChange={async (e) => {
    setCriteria(e.target.value);
  }}
>
  <option>Most recent First</option>
  <option>Price: Low to High</option>
  <option>Price: High to Low</option>
</select>;

获取帖子：

 const FetchPosts = async () => {
    const {
      data: { posts },
    } = await axios.get(`${process.env.API_URL}/api/posts`, {
      params: {
        filter: criteria,
      },
    });

    return posts;
  };

 useQuery("posts", FetchPosts);

 const posts = queryCache.getQueryData("posts");
4

2 回答 2

17

您可以使用您的条件作为查询键。每当查询的键更改时，查询将自动更新。

const FetchPosts = async ({criteria}) => {
    console.log(criteria) //from useQuery key

    //your get api call here with criteria params

    return posts;
};

const [criteria, setCriteria] = useState("")

const {isLoading, data: post} = useQuery(["posts", criteria], FetchPosts); //include criteria state to query key

console.log(post) 

<select
  name="filter"
  value={criteria}
  onChange={(e) => {
    setCriteria(e.target.value);  // trigger a re-render and cause the useQuery to run the query with the newly selected criteria
  }}
>
  <option>Most recent First</option>
  <option>Price: Low to High</option>
  <option>Price: High to Low</option>
</select>
于 2020-11-14T06:59:50.190 回答
4

问题已经回答了。这是我的两分钱：

将 useQuery 的查询键视为 useEffect 的依赖数组。每当键更改查询被执行。

如果您仍想控制查询的触发，您可以探索 useQuery 挂钩的“启用”选项。

于 2021-05-19T16:17:20.890 回答