亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Nextjs getStaticProps 未觸發

Nextjs getStaticProps 未觸發

拉莫斯之舞 2023-07-06 18:27:17
下面我的 [slug].js 文件有兩個 nextjs 輔助函數。getStaticPaths 和 getStaticProps 已導出。就我而言,它創建了路徑posts/[slug]。添加了一個名為hello.json. 現在,當我導航到localhost:3000/posts/hello它時,錯誤提示:TypeError: Cannot read property 'fileRelativePath' of undefined。對于10號線??吹絡sonFile未定義后,這是有道理的。事實上,整個過程getStaticProps從未被調用,那里的登錄也從未被記錄。為什么會發生這種情況?提前致謝。import React from 'react';import glob from 'glob';import { usePlugin } from 'tinacms';import { useJsonForm } from 'next-tinacms-json';const Page = ({ jsonFile }) => {    console.log(121212, jsonFile);    // Create the tina form    const [post, form] = useJsonForm(jsonFile);    // Register it with the CMS    usePlugin(form);    return (        <h1>            {post.title}        </h1>    );};export default Page;/** * By exporting the async function called getStaticProps from a page, Next.js * pre-renders this page at build time using the props returned by * getStaticProps. * The getStaticPaths function defines a list of paths that have * to be rendered to HTML at build time. */export async function getStaticProps({ ...ctx }) {    console.log(1212, ctx);    const { slug } = ctx.params;    const dynamicPath = `../../posts/${slug}.json`; // for eslint parsing error: "Cannot read property 'range' of null Occurred while linting"    const content = await import(dynamicPath);    console.log(121212, content);    return {        props: {            jsonFile: {                fileRelativePath: `/posts/${slug}.json`,                data: content.default,            },        },    };}export async function getStaticPaths() {    //get all .json files in the posts dir    const posts = glob.sync('posts/**/*.json');    const paths = posts.map(file => ({        params: {            slug: `${file.replace('.json', '')}`,        },    }));    return {        paths,        fallback: true,    };};
查看完整描述

1 回答

?
慕運維8079593

TA貢獻1876條經驗 獲得超5個贊

經過更多的挖掘后,我發現了這個問題,在這里發布希望可以幫助未來的讀者解決同樣的問題。


罪魁禍首是這樣的:


const dynamicPath = `../../posts/${slug}.json`; // for eslint parsing error: "Cannot read property 'range' of null Occurred while linting"

const content = await import(dynamicPath);

在動態導入中使用變量不起作用,只能使用字符串或模板文字。我使用了一個變量,因為 eslint 解析錯誤,只能通過降級到早期版本的 eslint 來解決。這會導致 eslint 在這個文件中無法為我工作,但是沒關系,至少該函數被調用了。


這與在調用之前調用組件代碼的觀察相結合,getStaticProps使得 jsonFile 變量未定義,并且整個組件在到達getStaticProps. 您可以看到以 開頭的日志121212早于1212。終端日志:


121212 {

  fileRelativePath: 'posts/hello.json',

  data: { title: 'Not the actual data' }

}

1212 hello

這對我來說是違反直覺的,因為我認為它會首先獲取道具并立即將它們傳遞給組件,但遺憾的是,需要定義默認道具來解決這個問題。


新代碼:


import React from 'react';

import glob from 'glob';

import { usePlugin } from 'tinacms';

import { useJsonForm } from 'next-tinacms-json';


const Page = ({ jsonFile }) => {

    console.log(121212, jsonFile);


    // Get content and form for Tina

    const [content, form] = useJsonForm(jsonFile);


    // Register it with the CMS

    usePlugin(form);


    return (

        <h1>

            {content.title}

        </h1>

    );

};


Page.defaultProps = {

    jsonFile: {

        fileRelativePath: 'posts/hello.json',

        data: {

            title: 'Not the actual data',

        },

    },

};


export default Page;


/**

 * By exporting the async function called getStaticProps from a page, Next.js

 * pre-renders this page at build time using the props returned by

 * getStaticProps.

 */

export async function getStaticProps({ params: { slug } }) {

    console.log(1212, slug);


    // This line caused the issue

    // const dynamicPath = (`../../posts/${slug}.json`; // for eslint parsing error: "Cannot read property 'range' of null Occurred while linting"

    const content = await import(`../../posts/${slug}.json`);


    return {

        props: {

            jsonFile: {

                fileRelativePath: `posts/${slug}.json`,

                data: content.default,

            },

        },

    };

}


/**

 * The getStaticPaths function defines a list of paths that have

 * to be rendered to HTML at build time.

 */

export async function getStaticPaths() {

    //get all .json files in the posts dir

    const posts = glob.sync('posts/**/*.json');


    return {

        paths: posts.map(file => ({

            params: {

                slug: `${file.replace('.json', '')}`,

            },

        })),

        fallback: true,

    };

}



查看完整回答
反對 回復 2023-07-06
  • 1 回答
  • 0 關注
  • 176 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號