如何修复 “TypeError: Cannot read properties of undefined (reading ‘length’)” 在 Next.js 中?

huangapple go评论59阅读模式
英文:

How to fix "TypeError: Cannot read properties of undefined (reading 'length')" in nextjs?

问题

I guess getStaticProps doesn't work well, but I don't know exact..
Is getStaticProps render after render Main function?

以下代码是index.js

import Main from "../components/main/main";

export default function Home() {
  return <Main/>;
}

以下代码是main.js

export async function getStaticProps() {
  const files = fs.readdirSync("ContentDetail");

  const getposts = files.map((fileName) => {
    const slug = fileName.replace(".md", "");
    const readFile = fs.readFileSync(`ContentDetail/${fileName}`, "utf-8");
    const { data: info, content } = matter(readFile);
    return {
      info,
      slug,
    };
  });

  return {
    props: {
      getposts,
    },
  };
}

export default function Main({ getposts }) {
  const [posts, setPosts] = useState(getposts);
  const [groupstyle, setGroupstyle] = useState();
  const [pages, setPages] = useState([]);
  const [totalPages, setTotalPages] = useState(Math.ceil(posts.length / 7));
  const [itemOffset, setItemOffset] = useState(0);

  const currentItems = posts.slice(itemOffset, itemOffset + 7);

  const contentRef = useRef([]);
  const backRef = useRef(null);
  // ...
}
英文:

enter image description here
I guess getStaticProps doesn't work well, but I don't know exact..
Is getStaticProps render after render Main function?

below code is index.js

import Main from &quot;../components/main/main&quot;;

export default function Home() {
  return &lt;Main/&gt;;
}

below code is main.js


export async function getStaticProps() {
  const files = fs.readdirSync(&quot;ContentDetail&quot;);

  const getposts = files.map((fileName) =&gt; {
    const slug = fileName.replace(&quot;.md&quot;, &quot;&quot;);
    const readFile = fs.readFileSync(`ContentDetail/${fileName}`, &quot;utf-8&quot;);
    const { data: info, content } = matter(readFile);
    return {
      info,
      slug,
    };
  });

  return {
    props: {
      getposts,
    },
  };
}

export default function Main({ getposts }) {
  const [posts, setPosts] = useState(getposts);
  const [groupstyle, setGroupstyle] = useState();
  const [pages, setPages] = useState([]);
  const [totalPages, setTotalPages] = useState(Math.ceil(posts.length / 7));
  const [itemOffset, setItemOffset] = useState(0);

  const currentItems = posts.slice(itemOffset, itemOffset + 7);

  const contentRef = useRef([]);
  const backRef = useRef(null);
  ......

答案1

得分: 0

修改以下行:

const [totalPages, setTotalPages] = useState(Math.ceil(posts && posts.length / 7));
英文:

Change the following line:

const [totalPages, setTotalPages] = useState(Math.ceil(posts &amp;&amp; posts.length / 7));

huangapple
  • 本文由 发表于 2023年4月13日 19:44:28
  • 转载请务必保留本文链接:https://go.coder-hub.com/76005025.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定