我正试图通过一个基本的购物清单CRUD Nextjs应用程序来了解新的tRPC版本10。我已经成功地建立了tRPC端点；获取所有"；和一个"；创建"；处理程序，并且可以在前端测试后确认它们都能工作。然而，我似乎无法用"；获取所有"；呼叫在较旧的tRPC版本中，我们会更新状态如下：
const data = trpc.useQuery(["items.getAll"], {
onSuccess(items) {
setItems(items);
},
});
然而，在版本10中，他们已经取消了useQuery((参数，转而根据文档返回条件状态。我尝试更新状态如下：
const [items, setItems] = useState<ShoppingItem[]>([]);
const data = trpc.shoppingItem.getAll.useQuery();
if (data.isSuccess) {
setItems(data.data);
}
可以理解的是，这导致了"；太多的重新渲染"；错误，因为每次状态更新时都会重新呈现组件，从而触发新的isSuccess并重新更新状态。
从tRPCv10更新状态的正确方法是什么？
我的完整组件如下所示：
import { useState, useEffect } from "react";
import { ShoppingItem } from "@prisma/client";
import type { NextPage } from "next";
import Head from "next/head";
import ItemModal from "../components/ItemModal";
import { trpc } from "../utils/trpc";
const Home: NextPage = () => {
const [items, setItems] = useState<ShoppingItem[]>([]);
const [modalOpen, setModalOpen] = useState<boolean>(false);
const data = trpc.shoppingItem.getAll.useQuery();
if (data.isSuccess) {
setItems(data.data);
}
return (
<>
<Head>
<title>Shopping List</title>
<meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" />
</Head>
{modalOpen && (
<ItemModal setModalOpen={setModalOpen} setItems={"hello"} />
)}
<main className="mx-auto my-12 max-w-3xl">
<div className="flex justify-between">
<h2 className="text-2xl font-semibold">My Shopping List</h2>
<button
className="rounded-md bg-violet-500 p-2 text-sm text-white transition hover:bg-violet-600"
type="button"
onClick={() => setModalOpen(true)}
>
Add Item
</button>
</div>
<ul className="mt-4">
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</main>
</>
);
};
export default Home;
我也遇到了同样的问题，并通过添加"undefined"作为useQuery((的参数使其正常工作。
const { data: itemsData, isLoading } = trpc.items.getAllItems.useQuery(undefined, {
onSuccess(items) {
setItems(items)
}
})不确定这是否是tRPC v10中更新状态的正确方式，但它似乎正在工作。如果你找到正确的方法，请告诉我！
我不确定这是否是处理此问题的预期方法，但我设法使其工作如下：
const [items, setItems] = useState<ShoppingItem[]>([]);
const [modalOpen, setModalOpen] = useState<boolean>(false);
const { data: shoppingItems } = trpc.shoppingItem.getAll.useQuery();
useEffect(() => {
shoppingItems && setItems(shoppingItems);
}, [shoppingItems]);
当从tRPC调用中提取的数据发生变化时，我调用useEffect来更新状态。
此外，我将setItems((方法传递给我的表单组件，并在突变成功时调用它：
const [input, setInput] = useState<string>("");
const addItem = trpc.shoppingItem.addItem.useMutation({
async onSuccess(newItem) {
setItems((prev) => [...prev, newItem]);
console.log(newItem);
},
});
const handleAddItem = () => {
addItem.mutate({ name: input });
setModalOpen(false);
};