我正在使用 ReactJS ，我希望在 map function 内 create a list 的menus of Material-UI .

menus 是 defined by 从map函数给出的 index 值 . 问题是 a menu 对象的内部 is not visible until the user clicks 在按钮上，所以当你打开它们时，每个菜单都是由最后一个索引（array.count - 1）定义的 .

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

How can I fix that?

这是我的代码：

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>
        )
      })

这个问题很容易被注意到，因为每个菜单项中都有 Rename shows the same output .

我希望我很清楚（抱歉我的英语不好） . 谢谢 .

reactjs