我正在使用 Next JS 和 typescript 構建一個應用程式。我正在嘗試使用 getStaticProps 從 api 呼叫資料，然后對回傳的道具進行解構。出于某種原因，我無法讓道具解構。
這是我的 getStaticProps 函式。
export async function getStaticProps() {
const projects = await client.fetch(groq`
*[_type == "project"]{
name, url, description, image, tools[]->{name,image}
}`);
const tools = await client.fetch(groq`*[_type == "techtool"]{
name, featured, url, image
}`);
return {
props: {
projects,
tools,
},
};
}
然后我試影像這樣將專案和工具傳遞給我的頁面。
const Home: NextPage = ({projects, tools}) => {
console.log(props);
return (
<React.Fragment>
<Nav />
<Intro />
<Contact />
<Sidebar />
<Footer />
</React.Fragment>
);
};
export default Home;
但是，執行此操作時出現以下錯誤。
"Property 'projects' does not exist on type '{ children?: ReactNode; }'."
"Property 'tools' does not exist on type '{ children?: ReactNode; }'."
我是否需要以某種方式將介面應用于道具？我究竟做錯了什么？
如果我將道具記錄到控制臺而不進行解構，它會回傳它應該回傳的兩個陣列。
提前致謝！
uj5u.com熱心網友回復：
注釋道具：
interface IHomeProps {
projects: whatGoesHere;
tools: whatGoesHere;
children?: ReactNode; // import from react if needed
}
const Home: NextPage = ({projects, tools}: IHomeProps) => {
uj5u.com熱心網友回復：
您應該嘗試在您的頁面中使用 pageProps，如下所示：
const Home: NextPage = ({ pageProps: {projects, tools} }) => {
console.log(projects, tools);
return (
<React.Fragment>
<Nav />
<Intro />
<Contact />
<Sidebar />
<Footer />
</React.Fragment>
);
};
這是您可以從頁面中的 getStaticProps 獲取道具的方式。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428551.html
標籤：javascript 打字稿 下一个.js
上一篇：nodews包，將連接分開到房間
下一篇：具有深度的遞回部分