如何解决仅当预定义了getStaticPath时,才调用getStaticProps
--src
--pages
--company
[...form].tsx
list.tsx
上面是文件夹结构,而我的目的是使用[...form].tsx
处理来自以下位置的请求:
/company/add
和/company/edit/<any_id>
该表单具有一些在构建时需要的静态道具,例如ADDRESS_TYPES,并且在getStaticProps中获取该静态道具以使其在所有表单(添加或编辑)上都是静态可用的。
//[...form].tsx
export default function CompanyForm({ADDRESS_TYPE,STATES}: {ADDRESS_TYPE: string[][],STATES: {[key:string]: string}}){
const router = useRouter();
console.log("----------Company Form------------")
console.log(router.query)
console.log(ADDRESS_TYPE)
............
}
export async function getStaticProps(context) {
console.log("---------------- getStaticProps ----------------")
console.log(context)
try {
const res = await axios.get(`${UTILITIES_EP}?list=address_type,states`);
return {
props: res.data,revalidate: 60,}
} catch (err) {
console.log("****** res Error *****",err)
return {
props: {},revalidate: 10
}
}
}
export async function getStaticPaths() {
console.log("---------------- getStaticPaths ----------------")
return {
paths: [
{params: {form: ['add']}},//{params: {form: ['edit','id']}},id need to be dynamic
],fallback: true
};
}
我没有任何访问/company/add
的问题,因为它是静态生成的,但是问题是,对/company/edit/<any_id>
的调用失败了,因为没有调用getStaticProps
,因此{{1} }是ADDRESS_TYPE
,并且该页面需要undefined
内的ADDRESS_TYPE
和从axios调用返回的其他道具才能正确呈现。
您最好的建议方法将不胜感激,我真的想对添加/编辑使用相同的文件,因为它是一个复杂的表单,具有大量的验证检查,因此我不想重复代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。