Reactjs 在循环中显示多个菜单

我不熟悉MaterialUI和React，我需要在一个循环中动态创建多个菜单。请按以下方式查找代码段：

state = {
    anchorEl: null,
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

    render() {
        const { anchorEl } = this.state;
        let items = _.map(results, (item, index) => {
        return (
              <ListItem
               key={item.ID}
               divider
              > 
              <ListItemSecondaryAction>
               <IconButton
                   aria-label="More"
                   aria-owns={anchorEl ? 'long-menu' : null}
                   aria-haspopup="true"
                   onClick={this.handleClick}
                  >
                  <MoreVertIcon />
                  </IconButton>
                  <Menu
                   id="long-menu"
                   anchorEl={anchorEl}
                   open={Boolean(anchorEl)}
                   onClose={this.handleClose}
                   PaperProps={{
                     style: {
                        maxHeight: 200,
                        width: 200,
                      },
                   }}
                  >
                <MenuItem>
                    <IconButton onClick={() => this.props.delete(item.ID)} >
                     Delete entry<DeleteIcon />
                     </IconButton>
                </MenuItem>
              </Menu>
             <ListItemSecondaryAction>
            </ListItem>
          )
        })
       return (
              <Fragment>
                <List>
                 {items}
                 </List>
              </Fragment>
             )
      }

状态={
主持人：空，
};
handleClick=事件=>{
this.setState（{ancorel:event.currentTarget}）；
};
handleClose=（）=>{
this.setState（{ancorel:null}）；
};
render（）{
const{anchorEl}=this.state；
let items=\映射（结果，（项目，索引）=>{
返回(
this.props.delete（item.ID）}>
删除条目
)
})
返回(
{items}
)
}

现在，使用上述代码，菜单工作正常，UI也很好。但每当我试图通过单击菜单内的“删除”图标来删除条目时，总是会删除最后一个条目，即item.ID传递最后一个元素的值，最后一个条目也会被删除。 是否有一种方法可以为每个条目创建唯一的菜单项，并管理状态，确保删除正确的条目，而不是始终删除最后一个条目。 注意：“结果”是动态加载的任何列表，“删除”函数实现删除相应条目的功能

---

提前感谢。

我建议使用另一个子组件来呈现列表项。在您当前的示例中，您只有一个

主播

，这意味着无论您在何处单击，都会打开一个菜单并对其执行操作，这是最后一个菜单。若菜单项有子组件，则每个组件都有自己的状态，并且只对该项工作

例子

类主扩展组件{
render（）{
let items=\映射（结果，（项目，索引）=>{
返回(
this.props.delete（item.ID）}/>
)
})
返回(
{items}
)
}
}
类MenuItemComponent扩展了组件{
状态={
主持人：空，
};
handleClick=事件=>{
this.setState（{ancorel:event.currentTarget}）；
};
handleClose=（）=>{
this.setState（{ancorel:null}）；
};
render（）{
const{item}=this.props；
const{anchorEl}=this.state；
返回(
this.props.onDelete（项目）}>
删除条目
)
}
}

---

下面是一个工作示例

我建议使用另一个子组件来呈现列表项。在您当前的示例中，您只有一个

主播

，这意味着无论您在何处单击，都会打开一个菜单并对其执行操作，这是最后一个菜单。若菜单项有子组件，则每个组件都有自己的状态，并且只对该项工作

例子

类主扩展组件{
render（）{
let items=\映射（结果，（项目，索引）=>{
返回(
this.props.delete（item.ID）}/>
)
})
返回(
{items}
)
}
}
类MenuItemComponent扩展了组件{
状态={
主持人：空，
};
handleClick=事件=>{
this.setState（{ancorel:event.currentTarget}）；
};
handleClose=（）=>{
this.setState（{ancorel:null}）；
};
render（）{
const{item}=this.props；
const{anchorEl}=this.state；
返回(
this.props.onDelete（项目）}>
删除条目
)
}
}

---

下面是一个工作示例

，因为您正在成功地将项目的唯一ID传递给delete函数，它应该可以正常工作。删除功能可能有问题。请使用该函数的内容更新您的问题。如果我将onclick事件放置在按钮上而不是创建此菜单项，则删除函数将正常工作。因此，这似乎是这个UI方法的问题，因为您正在成功地将项的唯一ID传递给delete函数，它应该能够正常工作。删除功能可能有问题。请使用该函数的内容更新您的问题。如果我将onclick事件放置在按钮上而不是创建此菜单项，则删除函数将正常工作。因此，这似乎是这个UI方法的问题

class Main extends Component {
  render() {
    let items = _.map(results, (item, index) => {
      return (
        <MenuItemComponent key={item.ID} item={item} onClick={this.handleClick} onDelete={(item) => this.props.delete(item.ID)} />
      )
    })

    return (
      <Fragment>
        <List>
          {items}
        </List>
      </Fragment>
    )
  }
}

class MenuItemComponent extends Component {
  state = {
    anchorEl: null,
  };

  handleClick = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };

  render() {
    const { item } = this.props;
    const { anchorEl } = this.state;

    return (
      <ListItem
        divider
      >
        <ListItemSecondaryAction>
          <IconButton
            aria-label="More"
            aria-owns={anchorEl ? 'long-menu' : null}
            aria-haspopup="true"
            onClick={this.handleClick.bind(this)}
          >
            <MoreVertIcon />
          </IconButton>
          <Menu
            id="long-menu"
            anchorEl={anchorEl}
            open={Boolean(anchorEl)}
            onClose={this.handleClose.bind(this)}
            PaperProps={{
              style: {
                maxHeight: 200,
                width: 200,
              },
            }}
          >
            <MenuItem>
              <IconButton onClick={() => this.props.onDelete(item)} >
                Delete entry<DeleteIcon />
              </IconButton>
            </MenuItem>
          </Menu>
        </ListItemSecondaryAction>
      </ListItem>
    )
  }
}