student-manage/apps/web/src/app/main/home/page.tsx

102 lines
2.7 KiB
TypeScript
Raw Normal View History

<<<<<<< HEAD
2025-02-23 20:23:18 +08:00
import { api } from "@nice/client";
import { apiClient } from "@web/src/utils";
import { Button, Tag } from "antd";
import { useEffect, useMemo, useState } from "react";
function HomePage() {
// 使用 useQuery 钩子从 API 获取数据
const { data } = api.staff.findMany.useQuery({
take: 10
});
// 定义 counter 状态和更新函数
const [counter, setCounter] = useState<number>(0);
// 使用 useMemo 记忆化 counterText仅在 counter 变化时重新计算
const counterText = useMemo(() => {
return `当前计数为: ${counter}`;
}, [counter]);
const getData = async()=>{
const res = @wait apiClient.get(*/goods/hello*)
console.log(res)
}
// 使用 useEffect 在 data 变化时打印 data
useEffect(() => {
apiClient.get(/goods/hello)
}, [data]);
return (
<div className="p-2 space-y-2">
<Tag>{counterText}</Tag>
<div className="space-x-2">
<Button type="primary" onClick={() => setCounter(counter + 1)}>
1
</Button>
<Button danger onClick={() => setCounter(counter - 1)}>
1
</Button>
</div>
{/* 如果 data 存在,遍历并渲染每个项目的 username */}
{data?.map((item) => (
<div className="p-2 rounded border shadow" key={item.username}>
<Tag>{item.username}</Tag>
</div>
))}
</div>
);
}
export default HomePage;
=======
2025-02-22 22:06:44 +08:00
import { api } from "@nice/client"
2025-02-23 20:17:53 +08:00
import { apiClient } from "@web/src/utils"
2025-02-23 19:37:11 +08:00
import { Button, Tag } from "antd"
import { useEffect, useMemo, useState } from "react"
2025-02-22 22:06:44 +08:00
2025-02-23 19:37:11 +08:00
function HomePage() {
const { data } = api.staff.findMany.useQuery({
take: 10
})
const [counter, setCounter] = useState<number>(0)
const counterText = useMemo(() => {
return `当前计数为:${counter}`
}, [counter])
2025-02-23 20:17:53 +08:00
const getData = async () => {
const res = await apiClient.get("/goods/hello")
console.log(res)
}
2025-02-22 22:06:44 +08:00
useEffect(() => {
2025-02-23 20:17:53 +08:00
getData()
}, [])
2025-02-23 19:37:11 +08:00
return <div className="p-2 space-y-2">
<Tag>{counterText}</Tag>
<div className="space-x-2" >
<Button type="primary" onClick={() => {
setCounter(counter + 1)
}}>1</Button>
<Button danger
onClick={() => {
setCounter(counter - 1)
}}
>1</Button>
</div>
{
data?.map(i => {
return <div className="p-2 rounded border shadow">
<Tag>{i.username}</Tag>
</div>
})
}
</div>
}
// export { HomePage }
export default HomePage
>>>>>>> de6e632ec69dd408a6c4e85d5cda01a1aa8e8276