Next.js中如何将表格行数据传递到updateCoupon页面组件？

错误写法的问题 #

你的原有写法存在两个核心问题：

• 事件函数内仅渲染<Link>组件但未返回，也未触发实际页面导航
• Next.js 页面组件（如UpdateCoupon）需通过路由跳转访问，不能在事件函数中直接渲染

方案1：通过URL查询参数传递唯一标识（推荐） #

这种方式符合SEO规范，且刷新页面后数据不会丢失，适合大多数场景。

表格组件修改 #

导入next/link，用Link包裹按钮，传递唯一标识couponCode作为查询参数：

import Link from 'next/link';

// 表格渲染核心代码
<table className="table-auto w-full text-left whitespace-no-wrap">
  <thead>...</thead>
  <tbody>
    {data.map((item) => (
      <tr key={item.couponCode}>
        <td>{item.couponCode}</td>
        <td>{item.type}</td>
        <td>{item.couponUsage}</td>
        <td>
          <Link href={`/updatecoupon?couponCode=${item.couponCode}`} passHref>
            <button className="px-3 py-1 bg-blue-500 text-white rounded">Update</button>
          </Link>
        </td>
      </tr>
    ))}
  </tbody>
</table>

UpdateCoupon页面修改 #

用useRouter获取查询参数，匹配对应数据：

import { useRouter } from "next/router";
// 数据可从全局变量、API或状态管理中获取
const data = [
  { couponCode: "generic_1001", description: "Generic Coupons", type: "通用", couponUsage: "已使用5次" },
  // 更多数据项
];

const UpdateCoupon = () => {
  const router = useRouter();
  const { couponCode } = router.query;
  const item = data.find(item => item.couponCode === couponCode);

  // 处理路由参数未加载完成的情况
  if (!item) return <div>加载中...</div>;

  return (
    <section className="text-gray-600 body-font banner02 p-4">
      <h2 className="text-xl font-bold mb-4">更新优惠券</h2>
      <div className="mb-2">优惠券代码：{item.couponCode}</div>
      <div className="mb-2">类型：{item.type}</div>
      <div className="mb-2">使用情况：{item.couponUsage}</div>
      <div className="mb-2">描述：{item.description}</div>
      {/* 可添加编辑表单字段 */}
    </section>
  );
};

export default UpdateCoupon;

方案2：通过路由state传递完整数据 #

适合不需要SEO、数据量较小的场景，数据存储在浏览器history状态中，刷新页面后会丢失。

表格组件修改 #

用useRouter的push方法传递state：

import { useRouter } from 'next/router';

// 初始化路由实例
const router = useRouter();

const handleUpdate = (item) => {
  router.push(
    '/updatecoupon',
    undefined,
    { state: { item } } // 将完整item存入路由state
  );
};

// 表格渲染核心代码
<table className="table-auto w-full text-left whitespace-no-wrap">
  <thead>...</thead>
  <tbody>
    {data.map((item) => (
      <tr key={item.couponCode}>
        <td>{item.couponCode}</td>
        <td>{item.type}</td>
        <td>{item.couponUsage}</td>
        <td>
          <button 
            onClick={() => handleUpdate(item)}
            className="px-3 py-1 bg-blue-500 text-white rounded"
          >
            Update
          </button>
        </td>
      </tr>
    ))}
  </tbody>
</table>

UpdateCoupon页面修改 #

从路由state中直接获取item：

import { useRouter } from "next/router";

const UpdateCoupon = () => {
  const router = useRouter();
  const item = router.state?.item;

  if (!item) return <div>加载中...</div>;

  return (
    <section className="text-gray-600 body-font banner02 p-4">
      <h2 className="text-xl font-bold mb-4">更新优惠券</h2>
      <div className="mb-2">优惠券代码：{item.couponCode}</div>
      <div className="mb-2">类型：{item.type}</div>
      <div className="mb-2">使用情况：{item.couponUsage}</div>
      <div className="mb-2">描述：{item.description}</div>
    </section>
  );
};

export default UpdateCoupon;

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