Next.js 语法高亮使用 Prism 失败

问题描述

我正在使用 next.js 并从 ghost API 获取帖子。尝试使用棱镜添加代码突出显示并且突出显示有效我在控制台中收到此错误：
**警告：React 检测到 Post 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误。 **,

post/[slug].tsx

import Link from 'next/link';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import Prism from 'prismjs';

const { BLOG_URL,CONTENT_API_KEY } = process.env;

async function getPost(slug: string) {
  const res = await fetch(
    `${BLOG_URL}/ghost/api/v3/content/posts/slug/${slug}?key=${CONTENT_API_KEY}&fields=title,slug,html`,).then((res) => res.json());

  const posts = res.posts;

  return posts[0];
}

// Ghost CMS request
export const getStaticProps = async ({ params }) => {
  const post = await getPost(params.slug);
  return {
    props: { post },};
};

export const getStaticPaths = () => {
  // paths -> slugs which are allowed
  return {
    paths: [],fallback: true,};
};

type Post = {
  title: string;
  html: string;
  slug: string;
};

const Post: React.FC<{ post: Post }> = (props) => {
  const { post } = props;

  const router = useRouter();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }

  useEffect(() => {
    Prism.highlightAll();
  },[]);

  return (
    <>
      {/* <Link href="/">
        <a>Go back</a>
      </Link> */}
      <div className="hero">
        <div className="hero__container">
          <h1 className="hero__container--par">{post.title}</h1>
        </div>
      </div>
      <div
        className="blog"
        dangerouslySetInnerHTML={{ __html: post.html }}
      ></div>
    </>
  );
};

export default Post;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ghost-blog reactjs reactjs