Reactjs 物料UI菜单未获取正确的ID

所以基本上我有一张桌子，需要有一个动作菜单按钮。渲染时，它复制给定数组的最后一个ID。我不知道这混乱背后到底是什么问题。我尝试过各种各样的解决方案，但它们并没有解决我的问题

这是我的实际代码

import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TablePagination,
  TableRow,
  TableSortLabel,
  Paper,
  Button,
  Menu,
  MenuItem
} from '@material-ui/core';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';

import { useStyles } from './table-started.styles';

function descendingComparator(a, b, orderBy) {
  if (b[orderBy] < a[orderBy]) {
    return -1;
  }
  if (b[orderBy] > a[orderBy]) {
    return 1;
  }
  return 0;
}

function getComparator(order, orderBy) {
  return order === 'desc'
    ? (a, b) => descendingComparator(a, b, orderBy)
    : (a, b) => -descendingComparator(a, b, orderBy);
}

function stableSort(array, comparator) {
  const stabilizedThis = array.map((el, index) => [el, index]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) return order;
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}

const headCells = [
  { id: 'title', disablePadding: false, label: 'Title' },
  { id: 'author_name', disablePadding: false, label: 'Author(s)' },
  { id: 'created_at', disablePadding: false, label: 'Started' },
  { id: 'actions', disablePadding: false, label: 'Actions' }
];

function EnhancedTableHead(props) {
  const tableStyles = useStyles();
  const { classes, order, orderBy, onRequestSort } = props;
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };

  return (
    <TableHead className={tableStyles.tableContainer}>
      <TableRow>
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            className={tableStyles.tableTitle}
            align='left'
            padding='default'
            sortDirection={orderBy === headCell.id ? order : false}
          >
            <TableSortLabel
              className={tableStyles.tableTitle}
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : 'asc'}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <span className={classes.visuallyHidden}>
                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
                </span>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  );
}

EnhancedTableHead.propTypes = {
  classes: PropTypes.object.isRequired,
  numSelected: PropTypes.number.isRequired,
  onRequestSort: PropTypes.func.isRequired,
  onSelectAllClick: PropTypes.func.isRequired,
  order: PropTypes.oneOf(['asc', 'desc']).isRequired,
  orderBy: PropTypes.string.isRequired,
  rowCount: PropTypes.number.isRequired
};

const TableStarted = ({ ctrResults }) => {
  const classes = useStyles();
  const [order, setOrder] = useState('asc');
  const [orderBy, setOrderBy] = useState('calories');
  const [selected, setSelected] = useState([]);
  const [page, setPage] = useState(0);
  const [rowsPerPage, setRowsPerPage] = useState(5);
  const [rows, setRows] = useState([]);

  useEffect(() => {
    if (ctrResults) {
      console.log(ctrResults);
      setRows(ctrResults);
    }
  }, [ctrResults]);

  const handleRequestSort = (event, property) => {
    const isAsc = orderBy === property && order === 'asc';
    setOrder(isAsc ? 'desc' : 'asc');
    setOrderBy(property);
  };

  const handleSelectAllClick = (event) => {
    if (event.target.checked) {
      const newSelecteds = rows.map((n) => n.name);
      setSelected(newSelecteds);
      return;
    }
    setSelected([]);
  };

  const handleClick = (event, name) => {
    const selectedIndex = selected.indexOf(name);
    let newSelected = [];

    if (selectedIndex === -1) {
      newSelected = newSelected.concat(selected, name);
    } else if (selectedIndex === 0) {
      newSelected = newSelected.concat(selected.slice(1));
    } else if (selectedIndex === selected.length - 1) {
      newSelected = newSelected.concat(selected.slice(0, -1));
    } else if (selectedIndex > 0) {
      newSelected = newSelected.concat(
        selected.slice(0, selectedIndex),
        selected.slice(selectedIndex + 1)
      );
    }

    setSelected(newSelected);
  };

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  const isSelected = (name) => selected.indexOf(name) !== -1;

  const emptyRows =
    rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage);

  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleMenuClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const goToEdit = (id, e) => {
    e.preventDefault();
    window.location.href = `/submission/results/${id}`;
  };

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <TableContainer>
          <Table
            className={classes.table}
            aria-labelledby='tableTitle'
            size='medium'
            aria-label='enhanced table'
          >
            <EnhancedTableHead
              classes={classes}
              numSelected={selected.length}
              order={order}
              orderBy={orderBy}
              onSelectAllClick={handleSelectAllClick}
              onRequestSort={handleRequestSort}
              rowCount={rows.length}
            />
            <TableBody className={classes.tableBody}>
              {stableSort(rows, getComparator(order, orderBy))
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map((row, index) => {
                  const isItemSelected = isSelected(row._id.$oid);
                  const labelId = `enhanced-table-checkbox-${index}`;

                  let author_name = row.author_first_name
                    ? row.author_first_name
                    : '';

                  author_name = row.author_last_name
                    ? author_name + ' ' + row.author_last_name
                    : 'N/A';

                  return (
                    <TableRow className={classes.tableRow}>
                      <TableCell
                        className={classes.tableData}
                        padding='default'
                        component='th'
                        id={labelId}
                        scope='row'
                      >
                        {row.title}
                      </TableCell>
                      <TableCell
                        scope='row'
                        className={classes.tableData}
                        align='left'
                      >
                        {author_name}
                      </TableCell>
                      <TableCell
                        scope='row'
                        className={classes.tableData}
                        align='left'
                      >
                        {row.created_at.substring(0, 10)}
                      </TableCell>
                      <TableCell
                        scope='row'
                        className={classes.tableData}
                        align='left'
                      >
                        <Menu
                          id='actions'
                          anchorEl={anchorEl}
                          keepMounted
                          open={Boolean(anchorEl)}
                          onClose={handleClose}
                        >
                          <MenuItem onClick={(e) => goToEdit(row._id.$oid, e)}>
                            Edit
                          </MenuItem>
                          <MenuItem onClick={handleClose}>Delete</MenuItem>
                        </Menu>
                        <Button
                          aria-controls='simple-menu'
                          aria-haspopup='true'
                          onClick={handleMenuClick}
                          className={classes.menuButton}
                          endIcon={
                            anchorEl ? (
                              <ArrowDropUpIcon />
                            ) : (
                              <ArrowDropDownIcon />
                            )
                          }
                        >
                          Actions
                        </Button>
                      </TableCell>
                    </TableRow>
                  );
                })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 53 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </TableContainer>
        <TablePagination
          rowsPerPageOptions={[5, 10, 20]}
          component='div'
          count={rows.length}
          rowsPerPage={rowsPerPage}
          page={page}
          onChangePage={handleChangePage}
          onChangeRowsPerPage={handleChangeRowsPerPage}
        />
      </Paper>
    </div>
  );
};

export default TableStarted;

import React，{useffect，useState}来自“React”；
从“道具类型”导入道具类型；
进口{
桌子
表体，
TableCell，
桌上容器，
桌面，
表格分页，
TableRow，
表端口标签，
纸张
按钮
菜单，
梅努伊特姆
}来自“@material ui/core”；
从“@material ui/icons/ArrowDropDown”导入ArrowDropDownIcon；
从“@material ui/icons/ArrowDropUp”导入ArrowDropUpIcon；
从“./table start.styles”导入{useStyles}；
函数下降比较器（a、b、orderBy）{
if（b[orderBy]a[orderBy]）{
返回1；
}
返回0；
}
函数getComparator（order，orderBy）{
退货订单==='desc'
？（a，b）=>下降比较器（a，b，orderBy）
：（a，b）=>-下降比较器（a，b，orderBy）；
}
函数stableSort（数组、比较器）{
const stabilizedThis=array.map（（el，index）=>[el，index]）；
稳定此排序（（a，b）=>{
常数阶=比较器（a[0]，b[0]）；
如果（订单！==0）退货订单；
返回a[1]-b[1]；
});
返回稳定该映射（（el）=>el[0]）；
}
常数头细胞=[
{id:'title'，disablePadding:false，label:'title'}，
{id:'author_name'，disablePadding:false，label:'author（s）}，
{id:'created_at'，disablePadding:false，label:'Started'}，
{id:'actions'，disablePadding:false，标签：'actions'}
];
功能增强型龙头（道具）{
const tableStyles=useStyles（）；
const{classes，order，orderBy，onRequestSort}=props；
const createSortHandler=（属性）=>（事件）=>{
onRequestSort（事件、属性）；
};
返回(
{headCells.map（（headCell）=>(
{headCell.label}
{orderBy===headCell.id(
{order=='desc'？'sorted descending'：'sorted suscending'}
)：null}
))}
);
}
EnhancedTableHead.propTypes={
类：PropTypes.object.isRequired，
numSelected:PropTypes.number.isRequired，
onRequestSort:PropTypes.func.isRequired，
选择单击：需要PropTypes.func.isRequired，
顺序：PropTypes.one of（['asc'，'desc']）。需要，
orderBy:PropTypes.string.isRequired，
行数：需要PropTypes.number.isRequired
};
const TableStarted=（{ctrResults}）=>{
const classes=useStyles（）；
const[order，setOrder]=useState（'asc'）；
const[orderBy，setOrderBy]=useState（'carries'）；
const[selected，setSelected]=useState（[]）；
const[page，setPage]=useState（0）；
const[rowsPerPage，setRowsPerPage]=useState（5）；
const[rows，setRows]=useState（[]）；
useffect（（）=>{
如果（结果）{
控制台日志（CTR结果）；
设置行（CTR结果）；
}
}[结果]；
常量handleRequestSort=（事件、属性）=>{
常量isAsc=orderBy==property&&order===asc'；
setOrder（isAsc？'desc'：'asc'）；
setOrderBy（属性）；
};
const handleSelectAllClick=（事件）=>{
if（event.target.checked）{
const newselected=rows.map（（n）=>n.name）；
当选（新当选）；
返回；
}
选举（[]）；
};
const handleClick=（事件、名称）=>{
const selectedIndex=selected.indexOf（名称）；
让newSelected=[]；
如果（已选择索引==-1）{
newSelected=newSelected.concat（selected，name）；
}else if（selectedIndex==0）{
newSelected=newSelected.concat（selected.slice（1））；
}else if（selectedIndex==selected.length-1）{
newSelected=newSelected.concat（selected.slice（0，-1））；
}否则如果（已选择索引>0）{
newSelected=newSelected.concat(
选定。切片（0，selectedIndex），
已选择。切片（已选择索引+1）
);
}
当选（新当选）；
};
const handleChangePage=（事件，新页面）=>{
设置页面（新页面）；
};
常量handleChangeRowsPerPage=（事件）=>{
setRowsPerPage（parseInt（event.target.value，10））；
设置页面（0）；
};
const isSelected=（name）=>selected.indexOf（name）！=-1；
空警察=
rowsPerPage-Math.min（rowsPerPage，rows.length-page*rowsPerPage）；
常量[anchorEl，setAnchorEl]=React.useState（null）；
常量handleMenuClick=（事件）=>{
Setancorel（事件当前目标）；
};
常量handleClose=（）=>{
setAnchorEl（空）；
};
const goToEdit=（id，e）=>{
e、 预防默认值（）；
window.location.href=`/submission/results/${id}`；
};
返回(
{stableSort（行，getComparator（order，orderBy））
.slice（第页*rowsPerPage，第页*rowsPerPage+rowsPerPage）
.map（（行，索引）=>{
const isItemSelected=isSelected（行编号$oid）；
const labelId=`增强的表复选框-${index}`；
让author\u name=row.author\u first\u name
？row.author\u first\u name
: '';
作者姓名=行。作者姓
？作者姓名+“”+行。作者姓氏
：‘不适用’；
返回(
{row.title}
{作者姓名}
{row.created_at.substring（0,10）}
goToEdit（行。\u id.$oid，e）}>
编辑
删除