Nodejs相关：前端小白，咨询下 nextjs, react 项目 useQuery 相关问题，多谢各位Nodejs大佬

下面代码，为啥 Hello1 正常，Hello2 不正常？ console.log 输出分别为: Hello1: success {Hello: 'World'} null false Hello2: undefined undefined undefined undefined

src/api/test3.tsx

'use client';
import { useQuery } from “@tanstack/react-query”
import axios from “axios”
function TestApi3() {
return {
    Hello1,
    Hello2,
}

function Hello1() {
    return useQuery({
        queryKey: ["hello2"],
        queryFn: async () =&gt; {
            const { data } = await axios.get("http://localhost:8000/api/hello", )
            return data;
        }
    })
}

function Hello2() {
    return useQuery({
        queryKey: ['hello3'],
        queryFn: async () =&gt; {
            const data = (await fetch('http://localhost:8000/api/hello')).json()
            return data
        },
    })
}
}
export { TestApi3 }

src/app/debug/page.tsx

'use client';
import { TestApi3 } from “@/api/test3”
export default function Home() {
const { status, data, error, isFetching } = TestApi3().Hello1();
console.log(‘Hello1:’, status, data, error, isFetching)
const { status2, data2, error2, isFetching2 } = TestApi3().Hello2();
console.log('Hello2:', status2, data2, error2, isFetching2)


return (
    &lt;main className=""&gt;
        &lt;div&gt;
            &lt;h1&gt;Hello World&lt;/h1&gt;
        &lt;/div&gt;

    &lt;/main&gt;
);
}

Nodejs相关：前端小白，咨询下 nextjs, react 项目 useQuery 相关问题，多谢各位Nodejs大佬

caililin 1楼•4 个月前

你觉得呢，变量名就不对。哪来的 status2, data2, error2, isFetching2 。
const { status as status2, data as data2 } 别名下

itying888 2楼•4 个月前

const { status: status2, data: data2, error: error2, isFetching: isFetching2 } = TestApi3().Hello2();

sinazl 3楼•4 个月前

fetch 的 response.json return type 是 promise

https://developer.mozilla.org/en-US/docs/Web/API/Response/json

h691938207 4楼•4 个月前

多谢各位大佬，是真前端小白

sinazl 5楼•4 个月前

关于你提到的Next.js、React项目以及useQuery的相关问题，这里给出一些专业的解答和示例代码。

Next.js是一个基于React的框架，用于构建服务器渲染的现代Web应用。在Next.js中，你可以使用React Query来简化数据获取和状态管理。React Query提供了useQuery钩子，它封装了数据获取的逻辑，包括请求、缓存、更新和错误处理。

首先，确保你的Next.js项目中已经安装了React Query。你可以通过npm或yarn来安装：

npm i @tanstack/react-query

或者

yarn add @tanstack/react-query

安装完成后，你可以在你的React组件中使用useQuery钩子。以下是一个简单的示例：

import { useQuery } from '@tanstack/react-query';

function ProductDetail() {
  const queryResult = useQuery(['productDetail', productId], async () => {
    const response = await fetch(`/api/products/${productId}`);
    return response.json();
  });

  if (queryResult.isLoading) return <div>Loading...</div>;
  if (queryResult.isError) return <div>Error: {queryResult.error.message}</div>;

  return (
    <div>
      <h1>{queryResult.data.title}</h1>
      <p>{queryResult.data.description}</p>
    </div>
  );
}

在这个示例中，useQuery钩子被用来获取产品的详细信息。它接收两个参数：一个唯一的查询键数组和一个异步函数，该函数返回数据的Promise。根据查询的状态（加载中、成功或错误），组件会渲染不同的内容。

希望这些信息对你有所帮助！如果你有更具体的问题或需要进一步的帮助，请随时提问。