Javascript 只有在预定义getStaticPath时才会调用getStaticProps

上面是文件夹结构，而我的意图是使用

[…form].tsx

来处理来自以下方面的请求：

/company/add

和

/company/edit/

表单有一些在构建时需要的静态道具，比如地址类型，这些道具在getStaticProps中获取，以便在所有表单上静态可用（添加或编辑）

我没有任何问题访问

/company/add

，因为它是静态生成的，但是问题是，调用

/company/edit/

失败，因为没有调用

getStaticProps

，因此

地址类型

是

未定义的

，页面需要

地址类型

和从

getStaticProps（）

中的axios调用返回的其他道具才能正确呈现

---

您对最佳方法的建议将不胜感激，我真的希望使用相同的文件进行添加/编辑，因为它是一个带有大量验证检查的复杂表单，因此我不想重复代码。

我刚刚发现这是一个已知问题，并且仍然开放了将近一年，因此，在找到最终解决方案之前，我并不期待任何答案。现在，我将寻找最好的工作

--src
  --pages
    --company
      [...form].tsx
      list.tsx

//[...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
  };
}