类型错误：mydata 未定义

Question

我试图通过从本地数据文件获取数据来生成动态页面，数据获取成功但获取错误数据未定义。请帮忙解决。

["use client";
import mdata from "@/lib/data";
import { notFound, useParams } from "next/navigation";

export default function Page() {
  const { slug } = useParams();
  const mydata = mdata.find((pg) => pg.name === slug);

  // if (!mydata) {
  //   notFound();
  // }

  return (
    <div>
      <div>{mydata.name}</div>
      <div>{mydata.catagory}</div>
    </div>
  );
}

export async function getStaticParams() {
  mdata.map((item) => {
    return {
      slug: item.name,
    };
  });
}][1]

Answer 1

1：异步数据获取：在React中，数据通常是异步获取的（例如，从API）。最初，数组可能为 null 或未定义，因为数据尚未加载。数据到达后，数组就会被填充。

2：组件渲染阶段：React 会尽快渲染组件，即使所有数据尚未完全加载。因此，组件可能会在数据获取完成后将数组渲染为 null 一次，并再次渲染包含数据的数组。

3：数组如何？.map() 有帮助 使用可选链接 (array?.map()) 通过仅在 array 不为 null 或未定义时调用 .map() 来防止错误。这样：

在初始渲染中（当 array 仍为 null 或未定义时）， array?.map() 返回 undefined 而不抛出错误，因此您的应用程序不会崩溃。 一旦获取数据并填充数组，.map() 就会正常运行并呈现数据。

您的情况：

export default function Page() {
  const { slug } = useParams();
  const mydata = mdata?.find((pg) => pg.name === slug);

  // if (!mydata) {
  //   notFound();
  // }

  return (
    <div>
      <div>{mydata?.name}</div>
      <div>{mydata?.catagory}</div>
    </div>
  );
}