时间戳

首页 > 解决方案 > 如何通过唯一 ID 在 ReactJs 中呈现 API 数据？

javascript - 如何通过唯一 ID 在 ReactJs 中呈现 API 数据？

问题描述

我有一个页面，其中保存在数据库中的每个数据都呈现在一个信息非常有限的表中，我有一个操作按钮（详细信息）来查看特定公司的所有信息。 这是按表

表格代码：

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,
            });
        });
});

单击详细信息按钮后，我想要详细信息页面中的特定信息，任何人都可以帮助我，该怎么做？

标签： javascriptnode.jsreactjsmongodbmern

解决方案

在您的数据库中，您必须有一个 id 列，将该列连同您的数据一起发送到 fetch API。在您的代码中，您将获得item.id，将该 id 用于 handleClick 按钮。

见下面的代码。

const PendingApplication = () => {
    let history = useHistory();
    const [data, setData] = useState([]);
    const handleClick = (id) => {
        console.log(id);
       //use id here 
        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(item.id)}>
                                    Detail
                                </Button>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </div>
    );
};

export default PendingApplication;

推荐阅读