【发布时间】：2021-09-22 13:14:30
【问题描述】：
我有一个页面，其中保存在数据库中的每个数据都呈现在一个信息非常有限的表中，我有一个操作按钮（详细信息）来查看特定公司的所有信息。
表格代码：
const PendingApplication = () => {
let history = useHistory();
const [data, setData] = useState([]);
const handleClick = (location) => {
console.log(location);
history.push(location);
};
useEffect(() => {
axios
.get('http://localhost:5000/api/kam')
.then((response) => {
console.log(response);
setData(response.data.kamData);
})
.catch((error) => {
console.log(error);
});
}, []);
return (
<div className="content">
<Table>
<TableHead>
<TableRow>
<TableCell>Ticket No</TableCell>
<TableCell align="right">Category</TableCell>
<TableCell align="right">Sub Category</TableCell>
<TableCell align="right">Request Time & Date</TableCell>
<TableCell align="right">Company Name</TableCell>
<TableCell align="right">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map((item, index) => (
<TableRow key={index}>
<TableCell>{item.ticketno}</TableCell>
<TableCell>{item.approvecategory}</TableCell>
<TableCell>{item.subcategory}</TableCell>
<TableCell>{item.date}</TableCell>
<TableCell>{item.companyname}</TableCell>
<TableCell>
<Button color="#71BD44" onClick={() => handleClick('/detail')}>
Detail
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
};
export default PendingApplication;
详情页代码如下：
const Details = () => {
const setPopup = useContext(SetPopupContext);
let history = useHistory();
const [data, setData] = useState([]);
const handleClick = (location) => {
console.log(location);
history.push(location);
};
useEffect(() => {
axios
.get('http://localhost:5000/api/kam/:id')
.then((response) => {
console.log(response);
setData(response.data.kamData);
})
.catch((error) => {
console.log(error);
});
}, []);
return (
<div className="content">
<Box
sx={{
width: '90%',
padding: '24px 20px', // theme padding
border: '1px solid rgba(0, 0, 0, 0.12)',
borderRadius: 4,
}}
>
<div className="ticket-details">
<h3>TICKET DETAILS</h3>
{data.map((item, index) => (
<TableRow>
<p>Ticket ID: {item.ticketno}</p>
<p>Category: {item.approvecategory}</p>
<p>Category: {item.subcategory}</p>
<p>Category: {item.date}</p>
</TableRow>
))}
</div>
<div className="additional-info">
<h3>ADDITONAL INFO</h3>
{data.map((item, index) => (
<TableRow>
<p>Company Name: {item.companyname}</p>
<p>KCP Name: {item.kcpname}</p>
<p>KCP Contact No: {item.kcpcontact}</p>
<p>KCP NID No: {item.kcpnid}</p>
<p>No of MSISDN: {item.msisdn}</p>
</TableRow>
))}
</div>
</Box>
</div>
);
};
export default Details;
我已经为唯一 ID 创建了 API，这里是 API：
router.get('/kam/:id', (req, res) => {
console.log(req.params.id);
kamForm
.findById(req.params.id)
.then((result) => {
res.status(200).json({
kamData: result,
});
})
.catch((err) => {
console.log(err);
res.status(500).json({
message: err,
});
});
});
点击详细信息按钮后，我想要该特定信息的详细信息页面，谁能帮助我，怎么做？
【问题讨论】：
-
您能告诉我们“单击详细信息按钮后，我想要详细信息页面中的特定信息”是什么意思吗？似乎您想将用户导航到前端的新页面“localhost:3000/details”，其中包含该票证的数据，对吗？如果是这种情况，请添加您的“详细信息”页面的代码 sn-p
-
是的，我想通过唯一 id 获取信息 在新页面上 在我的例子中，它是“localhost:3000/details”。我添加了详情页的代码 sn-p。
-
这能回答你的问题吗？ stackoverflow.com/questions/62236196/…
标签： javascript node.js reactjs mongodb mern