Next.js - 使用基于路由器查询参数的数据呈现模式答案

【问题标题】：Next.js - Render modal with data based on router query paramsNext.js - 使用基于路由器查询参数的数据呈现模式
【发布时间】：2021-08-18 16:08:19
【问题描述】：

我有一个显示卡片的提要。每张卡片都会打开一个模式，显示与卡片相关的更多信息，道具被传递到两个级别。这一切都很好，直到我为模态路由添加下一个链接。添加 Next Link 并为模态提供 URL 路由后，模态窗口中呈现的数据对于每个条目都是相同的，并且始终是提要中 data.map 中最后一个条目的数据。

请问是什么原因导致我们在使用简单模态路由时，模态窗口显示的数据不正确？下面有用于工作和非工作示例的代码框链接。

饲料：

export default function IndexPage() {
const data = [
{
  _id: "x1",
  name: "name_1",
  icon: "url1",
  price: "18"
},
{
  _id: "x2",
  name: "name_2",
  icon: "url2",
  price: "27"
},
{
  _id: "x3",
  name: "name_3",
  icon: "url3",
  price: "37"
},
{
  _id: "x4",
  name: "name_4",
  icon: "url4",
  price: "25"
}
];

return (
<div>
  {data.map((data) => (
    <Card key={data._id} data={data} />
  ))}
</div>
);
}

卡片：

const card = ({ data }) => {
const router = useRouter();

return (
<>
  <Link href={`/?postId=${data._id}`} as={`/view-post/${data.name}`}>
    <h1>{data.name}</h1>
  </Link>
  <Modal
    isOpen={!!router.query.postId}
    onRequestClose={() => router.push("/")}
    contentLabel="Post modal"
  >
    <ModalContent data={data} />
  </Modal>
  </>
  );
  };

 export default card;

如果我们更改 Card 组件中的代码并删除（简单）模态路由代码，则数据正确显示在 ModalContent 中：

<>
  <div onClick={openModal}>
    <h1>{data.name}</h1>
  </div>
  <Modal
    isOpen={modalIsOpen}
    onRequestClose={closeModal}
    contentLabel="Post modal"
  >
    <ModalContent data={data} />
  </Modal>
</>

ModalContent 只是一个显示两项数据的简单组件：

const DomainModalContent = ({ data }) => {
return (
<>
  <div>{data.name}</div>
  <div>{data.price}</div>
</>
);
};

请查看以下工作示例：

带模态路由（显示数据不正确）：https://codesandbox.io/s/kind-johnson-4jq6r?file=/pages/index.js

普通模态（数据正确）：https://codesandbox.io/s/brave-proskuriakova-uggmn?file=/pages/index.js

【问题讨论】：

您实际上是一次渲染 4 个模态（每张卡片 1 个），因为每张卡片都会呈现一个模态，如果路由器的查询对象包含 truthy @987654327，则会显示该模态@。您可能希望将isOpen 属性的条件更改为router.query.postId === data._id。您还应该将 card 组件更改为帕斯卡大小写（卡）。
太棒了，感谢瑞恩，这行得通。如果您将其放在答案而不是评论中，如果您愿意，我会将其标记为正确。再次感谢。

标签： javascript reactjs next.js

【解决方案1】：

虽然我对修复进行了评论，但我建议检查卡片父组件中 router.query 对象上的有效 postId，然后查找并存储与该 id 关联的数据项。然后，您可以在同一个父项中呈现单个 Modal（将存储的数据项作为道具传递），并根据存储的数据项的值（例如真值）有条件地显示它。

【讨论】：