[英]How to transfer/populate a data to another component in nextJS
I am building an application on Nextjs and tailwindcss我正在 Nextjs 和 tailwindcss 上构建应用程序
Simply I have a table of 4 columns with each row having a data in 3 colums and the last column contains the Update
button.简单地说,我有一个 4 列的表,每行有 3 个列中的数据,最后一列包含
Update
按钮。 The data in each row are populated with the help of the map function like this.每行中的数据都是在 map function 的帮助下填充的。
const data = [
{
couponCode: "generic_1001",
description: "Generic Coupons",
redeemSteps: "NA",
tnc: "free",
type: "GENERIC",
couponUsage: "ANY",
status: "ACTIVE"
},
{
couponCode: "generic_1002",
description: "Generic Coupons",
redeemSteps: "NA2",
tnc: "free",
type: "GENERIC_COHERT",
couponUsage: "USER_LEVEL",
status: "INACTIVE"
},
{
couponCode: "custom_1003",
description: "Custom Coupons",
redeemSteps: "NA3",
tnc: "free",
type: "CUSTOM",
couponUsage: "OVERALL",
status: "ACTIVE"
},
]
.
.
.
.
.
<table className="table-auto w-full text-left whitespace-no-wrap">
<thead>
<tr>
<th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl">CouponCode</th>
<th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Type</th>
<th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">Usage</th>
<th className="px-4 py-3 title-font tracking-wider font-medium text-gray-900 text-sm bg-gray-100">UpdateAll</th>
</tr>
</thead>
<tbody>
{
data.map((item) => {
return (
<>
<tr key={item.couponCode}>
<td className="px-4 py-3 text-gray-800">{item.couponCode}</td>
<td className="px-4 py-3">{item.type}</td>
<td className="px-4 py-3">{item.couponUsage}</td>
<td className="w-10 text-center">
<button
onClick={()=>handleUpdate(item)}
className="flex mx-auto text-white text-base bg-indigo-600 hover:bg-indigo-800 focus:ring-4 focus:outline-none focus:ring-indigo-300 font-medium rounded-lg px-2 py-1 text-center"
>
Update
<!-- what to write in handleUpdate(item) -->
</button>
</td>
</tr>
</>
)
})
}
</tbody>
</table>
Now I want to transfer the item
data as a prop
to another component I had built ie updateCoupon.js
.现在我想将
item
数据作为prop
传输到我构建的另一个组件,即updateCoupon.js
。 And when I go to the updateCoupon page
, I am able to see the item
data on that page.当我 go 到
updateCoupon page
时,我可以在该页面上看到item
数据。
/pages/updateCoupon.js /pages/updateCoupon.js
import React, { useState } from "react";
import { useRouter } from "next/router";
const UpdateCoupon = ({item}) => {
console.log("items = ", items);
return (
<>
<section className="text-gray-600 body-font banner02">
<div>
{item}
</div>
</section>
</>
);
};
export default UpdateCoupon;
I tried this我试过这个
const handleUpdate = (item) => {
<Link href="/updatecoupon">
<UpdateCoupon item={item} />
</Link>
}
but its not correct.但它不正确。
How can I populate the data to another component.如何将数据填充到另一个组件。
You need to use query params of next/router
.您需要使用
next/router
的查询参数。 You can send query parameters from your table like this:您可以像这样从表中发送查询参数:
import { useRouter } from 'next/router';
const router = useRouter();
const handleUpdate = (item) => {
router.push(
{
pathname: '/updatecoupon',
query: { item: JSON.stringify(item) },
},
undefined,
{ shallow: true }
);
};
And then, read the parameters on /pages/updatecoupon.js
like this:然后,像这样读取
/pages/updatecoupon.js
上的参数:
import { useRouter } from 'next/router';
const router = useRouter();
const item = router.query.item ? JSON.parse(router.query.item) : {};
You can take a look at this stackblitz project for a live working example of this approach.您可以查看这个 stackblitz 项目以获取此方法的实时工作示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.