如何在ReactJs中通过唯一ID渲染API返回的对应单条数据

操作步骤 #

1. 先调整路由配置
   你需要先在路由规则里给详情页绑定带ID参数的路径，以react-router为例：
   如果是v5版本：

<Route path="/detail/:id" component={Details} />

如果是v6版本：

<Route path="/detail/:id" element={<Details />} />

2. 修改列表页（PendingApplication组件）代码
   修改Detail按钮的点击逻辑，把当前条目的唯一ID拼到跳转路径里，这里默认你数据库存储的每条数据主键是MongoDB默认生成的_id字段：

// 替换原来的按钮代码
<Button color="#71BD44" onClick={() => handleClick(`/detail/${item._id}`)}>
    Detail
</Button>

3. 修改详情页（Details组件）代码

• 首先引入useParams钩子获取路由里的ID参数
• 修改axios请求的URL，把获取到的ID拼进去
• 修正渲染逻辑：你后端接口findById返回的是单条数据对象，不是数组，所以不需要用map遍历，直接读取属性即可
  修改后的完整详情页代码参考：

import { useParams } from 'react-router-dom'; // 新增导入

const Details = () => {
    const setPopup = useContext(SetPopupContext);
    let history = useHistory();
    const { id } = useParams(); // 获取路由里的ID参数
    const [data, setData] = useState({}); // 初始值改成对象，不是数组
    const handleClick = (location) => {
        console.log(location);
        history.push(location);
    };
    useEffect(() => {
        // 把ID拼到请求URL里
        axios
            .get(`http://localhost:5000/api/kam/${id}`)
            .then((response) => {
                console.log(response);
                setData(response.data.kamData);
            })
            .catch((error) => {
                console.log(error);
            });
    }, [id]); // 把id加进依赖数组，id变化时重新请求

    return (
        <div className="content">
            <Box
                sx={{
                    width: '90%',
                    padding: '24px 20px',
                    border: '1px solid rgba(0, 0, 0, 0.12)',
                    borderRadius: 4,
                }}
            >
                <div className="ticket-details">
                    <h3>TICKET DETAILS</h3>
                    {/* 去掉map，直接取属性 */}
                    <p>Ticket ID: {data.ticketno}</p>
                    <p>Category: {data.approvecategory}</p>
                    <p>Sub Category: {data.subcategory}</p>
                    <p>Request Time: {data.date}</p>
                </div>
                <div className="additional-info">
                    <h3>ADDITONAL INFO</h3>
                    <p>Company Name: {data.companyname}</p>
                    <p>KCP Name: {data.kcpname}</p>
                    <p>KCP Contact No: {data.kcpcontact}</p>
                    <p>KCP NID No: {data.kcpnid}</p>
                    <p>No of MSISDN: {data.msisdn}</p>
                </div>
            </Box>
        </div>
    );
};

export default Details;

补充说明 #

如果你的数据主键不是_id，把第二步里路径拼接的item._id换成你实际的主键字段名即可，可以在列表页的useEffect里打印response.data.kamData确认每条数据的主键字段。

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