Next.js动态路由中如何根据event_no变量获取指定JSON对象

我明白你的问题所在了——你现在在getStaticProps里把整个JSON数组都返回给组件了，但其实你需要先根据event_no筛选出对应的单个对象才行，不然组件里的event是一个数组，直接访问event?.event_name自然拿不到内容。

问题核心 #

从你给出的JSON结构来看，data是一个包含多个event对象的数组（开头的0 { ... }就是数组索引的标志）。你需要先从这个数组里找到与event_no匹配的那一项，再把它传给组件。另外要注意：context.params.event_no是字符串类型（路由参数默认都是字符串），而你的JSON里event_no是数字，直接比较会匹配失败，得先转成数字。

修改后的getStaticProps代码 #

export const getStaticProps = async (context) => {
  // 将路由参数转成数字，和JSON里的event_no类型匹配
  const event_no = Number(context.params.event_no); 
  const res = await fetch('URL_TO_JSON');
  const data = await res.json();

  // 从数组中找到匹配event_no的对象
  const matchedEvent = data.find(item => item.event_no === event_no);

  // 如果没找到对应的event，返回404页面
  if (!matchedEvent) {
    return {
      notFound: true,
    };
  }

  return {
    props: { event: matchedEvent },
  };
};

组件部分的使用 #

现在传给组件的event就是单个匹配的对象了，你之前写的组件代码完全可以正常工作——保留?.可选链写法还能增加代码的安全性，避免对象不存在时报错：

export default function Details({ event }) {
  console.log(event); // 现在这里会输出单个匹配的event对象
  return (
    <Box padding='lg'>
      <h1>{event?.event_name}</h1>
      <Card padding='md'>
        <Stack gap='sm'>
          <Text>{event?.event_notes}</Text>
          <Text>
            {event?.sales_period?.start_time} - {event?.sales_period?.end_time}
          </Text>
          <a className='buy-btn btn basm basm_select main-buy-btn solid' data-event_no={event?.event_no} >
            Køb
          </a>
        </Stack>
      </Card>
    </Box>
  );
}

额外优化建议 #

如果你的JSON数据量很大，每次都拉取整个数组再前端筛选会有点低效。如果后端支持的话，建议直接在fetch的URL里带上event_no参数（比如URL_TO_JSON?event_no=${event_no}），让后端直接返回单个匹配的对象，这样能提升页面加载性能。

内容的提问来源于stack exchange，提问作者Rvervuurt