时间戳

首页 > 解决方案 > 列表上的 React 单击按钮事件始终返回对最后一个元素的引用

javascript - 列表上的 React 单击按钮事件始终返回对最后一个元素的引用

问题描述

我正在尝试恢复元素数组上的选定项目，我有一个 API 服务，它返回一个包含 5 个工作的列表和一个 React 页面以显示申请人。列表中呈现的表格的每一行都有一个菜单按钮，当我单击菜单按钮时，它会触发 handleMenuOpen 事件并返回所选作业的索引，但是当单击查看申请人 menuItem 时，会触发 handleSeeApplicantsClick 事件并且返回值始终为 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>

但它不能修复错误，总是返回最后一个索引。

标签： javascriptarraysreactjsjsx

解决方案

更改handleMenuOpen(e, i)为handleMenuOpen(e, j)

i是您之前的最终值，columns.map(x, i)而您正在使用jobs.map( (x, j))

推荐阅读