第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Nextjs getStaticProps 未觸發(fā)

Nextjs getStaticProps 未觸發(fā)

拉莫斯之舞 2023-07-06 18:27:17
下面我的 [slug].js 文件有兩個(gè) nextjs 輔助函數(shù)。getStaticPaths 和 getStaticProps 已導(dǎo)出。就我而言,它創(chuàng)建了路徑posts/[slug]。添加了一個(gè)名為hello.json. 現(xiàn)在,當(dāng)我導(dǎo)航到localhost:3000/posts/hello它時(shí),錯(cuò)誤提示:TypeError: Cannot read property 'fileRelativePath' of undefined。對(duì)于10號(hào)線??吹絡(luò)sonFile未定義后,這是有道理的。事實(shí)上,整個(gè)過(guò)程getStaticProps從未被調(diào)用,那里的登錄也從未被記錄。為什么會(huì)發(fā)生這種情況?提前致謝。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 回答

?
慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊

經(jīng)過(guò)更多的挖掘后,我發(fā)現(xiàn)了這個(gè)問(wèn)題,在這里發(fā)布希望可以幫助未來(lái)的讀者解決同樣的問(wèn)題。


罪魁禍?zhǔn)资沁@樣的:


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

const content = await import(dynamicPath);

在動(dòng)態(tài)導(dǎo)入中使用變量不起作用,只能使用字符串或模板文字。我使用了一個(gè)變量,因?yàn)?eslint 解析錯(cuò)誤,只能通過(guò)降級(jí)到早期版本的 eslint 來(lái)解決。這會(huì)導(dǎo)致 eslint 在這個(gè)文件中無(wú)法為我工作,但是沒關(guān)系,至少該函數(shù)被調(diào)用了。


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


121212 {

  fileRelativePath: 'posts/hello.json',

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

}

1212 hello

這對(duì)我來(lái)說(shuō)是違反直覺的,因?yàn)槲艺J(rèn)為它會(huì)首先獲取道具并立即將它們傳遞給組件,但遺憾的是,需要定義默認(rèn)道具來(lái)解決這個(gè)問(wèn)題。


新代碼:


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,

    };

}



查看完整回答
反對(duì) 回復(fù) 2023-07-06
  • 1 回答
  • 0 關(guān)注
  • 191 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)