我正在尝试恢复元素数组中的选定项，我有一个api服务，它返回一个包含5个作业的列表和一个显示申请者的页面。列表中呈现的表的每一行都有一个菜单按钮，当我单击菜单按钮时，它触发handlemenuopen事件并返回所选作业的索引，但是，当单击“查看申请者”菜单项时，将触发HandleSeeApplicationsClick事件，返回值始终为4（上一份工作的索引），您能帮我解决这个问题吗？
提前谢谢

import { useState, useEffect } from 'react';

import ApiService from '../../services/ApiService';

export default function Evaluation(props) {
    const [jobs, setJobs] = useState([]);
    const [selected, setSelected] = useState(null);
    const [anchorEl, setAnchorEl] = useState(null);

    const columns = [
        {label: 'Description', minWidth: 220, width: 200,},
        {label: '', minWidth: 20, width: 20},
    ];

    const loadJobs = async() => {
        const result = await ApiService.get('/u/jobs');
        setJobs(result.data || []);
    };

    const loadSelectedJob = async(jobId) => {
        const result = await ApiService.get('/u/job/'+jobId);
        setSelected(result);
    };

    useEffect( async() => {
        if(!jobs?.length) loadJobs();
    }, []);

    const handleSeeApplicantsClick = (i) => {
        console.log(i);
        setAnchorEl(null);
    };

    const handleMenuOpen = (e, i) => {
        console.log(i);
        setAnchorEl(e?.currentTarget);
    }

    return (<div>
        <TableContainer component={Paper}>
            <Table stickyHeader>
                <TableHead>
                    <TableRow>
                        { columns.map((x, i) => <TableCell key={i}>{ x.label }</TableCell>) }
                    </TableRow>
                </TableHead>
                <TableBody>
                    {jobs.map( (x, j) => <TableRow key={x.id} >
                        <TableCell>
                            <Typography variant="body2">{ x.description }</Typography>
                        </TableCell>
                        <TableCell>
                            <IconButton onClick={ (e) => handleMenuOpen(e, i) }>
                                <MenuIcon />
                            </IconButton>
                            <Menu anchorEl={anchorEl} open={ Boolean(anchorEl) } onClose={() => handleMenuOpen(null)}>
                                <MenuItem onClick={ (ex) => { handleSeeApplicantsClick(i) }}>See applicants</MenuItem>
                            </Menu>
                        </TableCell>
                    </TableRow> )}
                </TableBody>
            </Table>
        </TableContainer>
    </div>);
}

编辑：正如建议的那样，我已经像这样更改了代码

<IconButton onClick={ (e) => handleMenuOpen(e, j) }>
                                <MenuIcon />
                            </IconButton>

但它并没有修复错误，最后一个索引总是返回。