axios useQuery未返回任何数据

fnvucqvd 于 2022-11-05 发布在 iOS

关注(0)|答案(1)|浏览(96)

我是react查询新手，我没有获得useQuery挂钩返回的任何数据，但API请求工作正常

const listofgroupsapi = async (lastId, limit, id) => {
  const res = await axios.get(
    `${apiURL}/groups/getAllGroups?lastId=-1&limit=10&id=${id}`
  );
  console.log(res.data);
  return res.data;
};

const Superadminpanel = () => {
const [lastId, setLastId] = useState(0);
  const [limit, setLimit] = useState(10);
  const [id, setId] = useState(cookies.id);
  const { isLoading, data } = useQuery("groups", () => {
    listofgroupsapi(lastId, limit, id);
  });

  return (
    <div style={{ minHeight: "90vh" }}>
      <div>
        <h1>here we are</h1>
        {isLoading ? <h1>loading</h1> : <h1>not loading</h1>}
        {data ? <h1>data</h1> : <h1>no data:{data}</h1>}
      </div>
    </div>
  );
};

export default Superadminpanel;

console.log（res.data）从我的api中给出了正确的结果
response of my api
我不知道为什么useQuery不给予我任何数据
React query dev tool image

axios

来源：https://stackoverflow.com/questions/74177426/no-data-returned-from-usequery

1条答案

按热度按时间

gz5pxeao1#

您的主要问题是没有从listofgroupsapi()返回承诺结果，但是您还可以进行其他改进。
根据React查询文档...

如果您的查询函数依赖于变量，请将其包含在查询关键字中

由于查询关键字唯一地描述了它们正在获取的数据，因此它们应该包括您在查询函数中使用的更改的任何变量
考虑到这一点，您应该使用以下命令

const listofgroupsapi = async (lastId, limit, id) =>
  (
    await axios.get(`/groups/getAllGroups`, { // no need for template literals
      baseURL: apiURL,
      params: { // query params are easier and safer this way
        lastId: -1, // not lastId?
        limit: 10, // not limit?
        id,
      },
    })
  ).data;

和组件中

const { isLoading, data } = useQuery(["groups", lastId, limit, id], () =>
  listofgroupsapi(lastId, limit, id) // no {...} means implicit return
);

赞(0）回复(0）举报 2022-11-05

我来回答

axios useQuery未返回任何数据

1条答案

相关问题

热门标签

最新问答