英文:
How to make an API request with tRPC and NextJS without an invalid hook call error
问题
以下是代码部分的翻译:
my zip code component
'use client';
import { type NextPage } from "next"
import { NextPageButtonLink } from "../UI/NextPageButtonLink"
import { api } from "../utils/api"
import { useState } from "react"
const ZipCode: NextPage = () => {
const [zip code, setZipCode] = useState("");
// This posts on every rerender and input. Ideally, it should only post when the user clicks submit
// const postZipCodeResult = API.zipcode.postZipCode.use query({userId: "1", zipcode: zipcode});
const handleSubmit = () => {
// This throws the invalid hook location error
const postZipCodeResult = API.zipcode.postZipCode.use query({userId: "1", zipcode: zipcode});
console.log("Posting result", postZipCodeResult)
}
return (
<div className="bg-[#3276AE] flex flex-col items-center h-screen">
<form onSubmit={handleSubmit}>
<label htmlFor="zipcode">Enter your zipcode:
<input type="text" id="zipcode" name="zipcode" required value={zipcode} onChange={e => setZipCode(e.target.value)} />
</label>
<button type="submit">Submit</button>
</form>
<NextPageButtonLink pageName="survey" msg="Click here to start the demographics survey." />
</div>
)
}
export default ZipCode;
My zip code page:
import dynamic from "next/dynamic";
const ZipCode = dynamic(() => import('components/zipcode'), {
SSR: false
})
export default function ZipCodePage() {
return (<ZipCode/>)
}
my zip code router
import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "../trpc";
export const zipcodeRouter = createTRPCRouter({
postZipCode: publicProcedure
.input(z.object({ userId: z.string(), zipcode: z.string() }))
.query(({ input }) => {
return {
zipcode: `User: ${input.userId} zipcode: ${input.zipcode}`,
};
}),
});
英文:
I'm trying to send user input data to my tRPC API. When I try to send my query, I get an error that I can only use React Hooks inside a function component. I believe I can't call tRPC's useQuery from a callback because it's a react hook, but how can I submit the mutation when the form is completed?
my zip code component
'use client';
import { type NextPage } from "next"
import { NextPageButtonLink } from "../UI/NextPageButtonLink"
import { api } from "../utils/api";
import { useState } from "react";
const ZipCode: NextPage = () => {
const [zip code, setZipCode] = useState("");
// This posts on every rerender and input. Ideally, it should only post when the user clicks submit
// const postZipCodeResult = API.zipcode.postZipCode.use query({userId: "1", zipcode: zipcode});
const handleSubmit = () => {
// This throws the invalid hook location error
const postZipCodeResult = API.zipcode.postZipCode.use query({userId: "1", zipcode: zipcode});
console.log("Posting result", postZipCodeResult)
}
return (
<div className="bg-[#3276AE] flex flex-col items-center h-screen">
<form onSubmit={handleSubmit}>
<label htmlFor="zipcode">Enter your zipcode:
<input type="text" id="zipcode" name="zipcode" required value={zipcode} onChange={e => setZipCode(e.target.value)} />
</label>
<button type="submit">Submit</button>
</form>
<NextPageButtonLink pageName="survey" msg="Click here to start the demographics survey." />
</div>
)
}
export default ZipCode;
My zip code page:
import dynamic from "next/dynamic";
const ZipCode = dynamic(() => import('../components/zipcode'), {
SSR: false
})
export default function ZipCodePage() {
return (<ZipCode/>)
}
my zip code router
import { z } from "zod";
import { createTRPCRouter, publicProcedure } from "../trpc";
export const zipcodeRouter = createTRPCRouter({
postZipCode: publicProcedure
.input(z.object({ userId: z.string(), zipcode: z.string() }))
.query(({ input }) => {
return {
zipcode: `User: ${input.userId} zipcode: ${input.zipcode}`,
};
}),
});
答案1
得分: 3
你不能有条件地调用钩子,但你可以禁用查询,然后在用户点击按钮时使用它的 refetch
来触发它。
const ZipCode: NextPage = () => {
const [zipcode, setZipCode] = useState("");
const { data, refetch } = api.zipcode.postZipCode.useQuery({ userId: "1", zipcode: zipcode }, {
enabled: false
});
const handleSubmit = () => {
refetch();
}
return (
<div className="bg-[#3276AE] flex flex-col items-center h-screen">
<form onSubmit={handleSubmit}>
<label htmlFor="zipcode">Enter your zipcode:
<input type="text" id="zipcode" name="zipcode" required value={zipcode} onChange={e => setZipCode(e.target.value)} />
</label>
<button type="submit">Submit</button>
</form>
{
data && (
<pre>{data.zipcode}</pre>
)
}
</div>
)
}
export default ZipCode;
英文:
You can't call hooks conditionally, but you can disable the query and then use its refetch
to fire it when the user clicks the button.
const ZipCode: NextPage = () => {
const [zipcode, setZipCode] = useState("");
const { data, refetch } = api.zipcode.postZipCode.useQuery({userId: "1", zipcode: zipcode}, {
enabled: false
});
const handleSubmit = () => {
refetch();
}
return (
<div className="bg-[#3276AE] flex flex-col items-center h-screen">
<form onSubmit={handleSubmit}>
<label htmlFor="zipcode">Enter your zipcode:
<input type="text" id="zipcode" name="zipcode" required value={zipcode} onChange={e => setZipCode(e.target.value)} />
</label>
<button type="submit">Submit</button>
</form>
{
data && (
<pre>{data.zipcode}</pre>
)
}
</div>
)
}
export default ZipCode;
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论