在React中通过数组映射时仅获取最后一项的数据

问题描述

有两个项目-第一个项目的ID = 69，第二个项目的ID为70。函数 renderToolTipButtons 接受按钮的列表并进行渲染（以下示例））。我面临的问题是页面呈现时，第6行控制台上的项目ID数据正确地依次为69和70。但是当我实际单击呈现的按钮时，第14行仅显示第二个项目的项目ID，即始终为70 ...。我认为这与关闭有关吗？

任何帮助将不胜感激：）

   return [
      {
        text: 'Button 1',icon: <EditIcon fontSize="small" />,color: '#272727',callback: handleEditProject,},{
        text: 'Button 2',icon: <DeleteIcon fontSize="small" />,color: '#c12026',callback: handleLeaveProject,];

export default function CustomToolTip(props) {
  const { open,anchorEl,index,tooltipButtons,projectID } = props;

  const renderTooltipButtons = buttons => {
    return buttons.map((button,index) => {
      console.log(projectID); // LINE 6 **  This console log shows 69 and 70 when the components render **

      return (
        <React.Fragment key={index}>
          <Button
            onClick={event => {
              event.stopPropagation();
              // button.callback(projectID) -> The goal is to call something like this,but projectID always refers to the last project ID,70. 
              console.log(projectID); // LINE 14 **** Always the ID of the last item,which is 70 upon clicked ****
            }}
            startIcon={button.icon}
          >
            <span style={{ color: button.color }}>{button.text}</span>
          </Button>
        </React.Fragment>
      );
    });
  };

  return (
    <Popper
      modifiers={{
        preventOverflow: {
          enabled: false,boundariesElement: 'viewport',}}
      id={index}
      placement="bottom-end"
      open={open}
      anchorEl={anchorEl}
    >
      <Paper elevation={0}>{renderTooltipButtons(tooltipButtons)}</Paper>
    </Popper>
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

closures reactjs reactjs