getStaticProps вызывается только тогда, когда getStaticPath предопределен
--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
не был вызван, таким образом
ADDRESS_TYPE
является
undefined
и страница требует
ADDRESS_TYPE
и другие реквизиты, возвращенные из вызова axios в
getStaticProps()
правильно отобразить.
Ваш совет о наилучшем подходе к этому будет оценен, я действительно хочу использовать один и тот же файл для добавления / редактирования, потому что это сложная форма с большим количеством проверок, поэтому я не хотел бы дублировать код.