ReactJS，由映射函数创建的对象的问题

Question

我正在使用 ReactJS ，并且想在地图功能中创建menus of Material-UI的列表。

菜单由地图功能提供的索引值定义。问题在于菜单对象的内部只有在用户单击按钮上才可见，因此，当您打开它们时，每个菜单都由最后一个索引（数组）定义。数-1）。

这使我的菜单无法正常工作。

我该如何解决？

这是我的代码：

  this.state.myOpenings.mosse.map((v, index) => {
        return (
          <ListItem
            onClick={() => {
              this.setState({ /*openingsPage: 1, */ openingSelectedTraining: index })
              this.goTo("training")
            }}
            button
          >
            <IconButton
              onClick={e => {
                this.invertOpeningColor(index)
                this.forceUpdate()
                e.stopPropagation()
                return true
              }}
            >
              <svg width="24px" height="24px" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
                <g>
                  <circle cx="12" cy="12" r="12" style={{ fill: v.color === 1 ? "#ffce99" : "#d18b46" }} />
                </g>
              </svg>
            </IconButton>
            <ListItemText style={{ paddingLeft: "3px" }} primary={<span style={{ color: textColor }}>{v.name}</span>} />
            <ListItemSecondaryAction>
              <IconButton style={{ color: textColor }} aria-label="More" aria-owns={this.state.moreMenuOpen ? "long-menu" : undefined} aria-haspopup="true" onClick={e => this.setState({ moreMenuOpen: true, moreMenuOpenAnchorEl: e.currentTarget })}>
                <MoreIcon />
              </IconButton>
              <Menu
                id="long-menu"
                open={this.state.moreMenuOpen}
                onClose={() => this.setState({ moreMenuOpen: false })}
                PaperProps={{
                  style: {
                    maxHeight: 48 * 4.5,
                    width: 200
                  }
                }}
                anchorEl={this.state.moreMenuOpenAnchorEl}
              >
                <MenuItem
                  onClick={() => {
                    this.setState({ moreMenuOpen: false, openingSelected: index })
                    this.goTo("record")
                  }}
                >
                  <EditIcon style={{ color: "gray" }} />
                  &nbsp;&nbsp;Edit
                </MenuItem>
                <MenuItem onClick={() => this.setState({ moreMenuOpen: false, openingSelected: index, changeNameDialogOpen: true })}>
                  <RenameIcon style={{ color: "gray" }} />
                  &nbsp;&nbsp;Rename
                  {index}
                </MenuItem>
                <MenuItem
                  onClick={() => {
                    this.setState({ moreMenuOpen: false, deleteOpeningStory: [...v.story], deleteOpeningDialogOpen: true })
                    //e.stopPropagation();
                  }}
                >
                  <DeleteIcon style={{ color: "gray" }} />
                  &nbsp;&nbsp;Delete
                </MenuItem>
              </Menu>
            </ListItemSecondaryAction>
          </ListItem>
        )
      })

由于每个菜单项中的重命名{index}显示相同的输出，因此很容易注意到该问题。

我希望我很清楚（对不起我的英语不好）。 谢谢。