仅当更改某些参数的值＆＃x200b;时，如何查询React查询？

发布于 2025-02-13 05:53:30 字数 745 浏览 1 评论 0原文

以下是我实际使用React查询的部分。

我的编码如下，反应查询不断恢复API。

只有在更改参数prodcode和Pagable的参数时才能进行API调用？

// react-query
  const getReviewList = useQuery(
    ['getReviewList', prodCode, pageable],
    () =>
      ReviewApi.getReviewList({
        prodCode,
        pageable
      }),
    {
      enabled: !!prodCode,
      refetchOnWindowFocus: false,
      onSuccess: (data) => {
        if (!_.isUndefined(data)) {
          const copiedReviewList = reviewList.slice();
          copiedReviewList.push(...data.returnData);
          // recoil state setting
          setReviewList(copiedReviewList);
        }
      },
      onError: () => {
        setReviewList([] as Array<ReviewModel>);
      }
    }
  );

原文

The following is the part where I actually used React Query.

I coded as follows, and React Query keeps refetching the API.

How can I make the API call only when the parameters prodCode and pageable are changed?

// react-query
  const getReviewList = useQuery(
    ['getReviewList', prodCode, pageable],
    () =>
      ReviewApi.getReviewList({
        prodCode,
        pageable
      }),
    {
      enabled: !!prodCode,
      refetchOnWindowFocus: false,
      onSuccess: (data) => {
        if (!_.isUndefined(data)) {
          const copiedReviewList = reviewList.slice();
          copiedReviewList.push(...data.returnData);
          // recoil state setting
          setReviewList(copiedReviewList);
        }
      },
      onError: () => {
        setReviewList([] as Array<ReviewModel>);
      }
    }
  );

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

呆 2025-02-20 05:53:30

REACT查询不会进行倒架。您应该让React通过具有PropCode和Pagable作为状态变量来照顾这一点。 OnSuccess和OnError用于与数据相关的内容，因此请勿更新其中的React状态变量。

我建议创建一个特定的查询类 - usereViewListFetcher，然后在组件中使用该类别。有点像这样：

const useReviewListQuery = (prodCode, pageable) =>
  useQuery(
    ["getReviewList", prodCode, pageable],
    () =>
      ReviewApi.getReviewList({
        prodCode,
        pageable,
      }),
    {
      enabled: !!prodCode,
      refetchOnWindowFocus: false,
    }
  );

interface Props {
  prodCode: string;
  pageable: boolean;
}

const ReviewList = (props: Props) => {
  const reviewListQuery = useReviewListQuery(
    props.propCode,
    props.pageable
  );

  if (reviewListFetcher.data === undefined) {
    return <div>Loading.</div>;
  }

  return (
    <ul>
      {reviewListFetcher.data.map((listItem) => (
        <li>{listItem}</li>
      ))}
    </ul>
  );
};

React Query will not refetch. You should let React take care for that by having propCode and pageable as state variables. onSuccess and onError are meant to be used for data-related stuff, so don't update React state variables in there.

I would suggest creating a specific query class - useReviewListFetcher and then use that one in your components. Somewhat like this:

const useReviewListQuery = (prodCode, pageable) =>
  useQuery(
    ["getReviewList", prodCode, pageable],
    () =>
      ReviewApi.getReviewList({
        prodCode,
        pageable,
      }),
    {
      enabled: !!prodCode,
      refetchOnWindowFocus: false,
    }
  );

interface Props {
  prodCode: string;
  pageable: boolean;
}

const ReviewList = (props: Props) => {
  const reviewListQuery = useReviewListQuery(
    props.propCode,
    props.pageable
  );

  if (reviewListFetcher.data === undefined) {
    return <div>Loading.</div>;
  }

  return (
    <ul>
      {reviewListFetcher.data.map((listItem) => (
        <li>{listItem}</li>
      ))}
    </ul>
  );
};

回复收藏 0 原文

~没有更多了~