获取查询时数据未更新 - React-Query？

Question

我有一个三复选框类型，

当我选中任何复选框时，我会在 refetch() 中调用 useEffect()。 第一次，我选中所有框并返回预期数据！

但是对于某些“随机更改复选框”的情况，从 API 返回的数据是“未定义的”尽管它在 Postman 中返回了预期数据 em>！

所以我想我是否需要为我想要获取的每个数据提供一个唯一的 queryKey

所以我提供了一个随机值“Date.now()”但仍然返回 undefined

代码片段

 type bodyQuery = {
    product_id: number;
    values: {};
  };
  const [fetch, setFetch] = useState<number>();
  const [bodyQuery, setBodyQuery] = useState<bodyQuery>({
    product_id: item.id,
    values: {},
  });

 const {
    data: updatedPrice,
    status,
    isFetching: loadingPrice,
    refetch,
  } = useQuery(
    ['getUpdatedPrice', fetch, bodyQuery],
    () => getOptionsPrice(bodyQuery),
    {
      enabled: false,
    },
  );

  console.log('@bodyQuery: ', bodyQuery);
  console.log('@status: ', status);
  console.log('@updatedPrice: ', updatedPrice);

  useEffect(() => {
    if (Object.keys(bodyQuery.values).length > 0) {
      refetch();
    }
  }, [bodyQuery, refetch]);



export const getOptionsPrice = async (body: object) => {
  try {
    let response = await API.post('/filter/product/price', body);
    return response.data?.detail?.price;
  } catch (error) {
    throw new Error(error);
  }
};

Answer 1

所以经过聊天中的一些阐述，这个问题可以通过利用 useQuery 键数组来解决。

例如，由于它的行为类似于 useEffect 中的依赖项数组，因此应将定义结果数据的所有内容插入其中。而不是触发 refetch 来更新数据。

此处的键可能如下所示：['getUpdatedPrice', item.id, ...Object.keys(bodyQuery.values)]，如果这些值发生变化并在初始渲染时触发新的获取。

>