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

Question

我有一个三复选框类型，

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

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

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

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

代码片段

 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)]，如果这些值发生变化并且在初始渲染时，它将触发新的获取。