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() правильно отобразить.

Ваш совет о наилучшем подходе к этому будет оценен, я действительно хочу использовать один и тот же файл для добавления / редактирования, потому что это сложная форма с большим количеством проверок, поэтому я не хотел бы дублировать код.

0 ответов

Другие вопросы по тегам