在data.map（）循環中使用React / Material-UI onClick事件觸發多次

Question

首先，我的英語不太好。

 {data.sort(getSorting(order, orderBy)) .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) .map(n => { ........ <Button onClick={this.handleLsClick}> Open Menu </Button> <Dialog onClose={this.handleLsClose} aria-labelledby="simple-dialog-title" open={open} > <div> <List> {[1,2,3,4,5].map(e => ( <ListItem button key={e}> <ListItemText primary={e} /> </ListItem> ))} </List> </div> </Dialog> ......... 

基本上，這些代碼可以正常工作，但是如果我將它們放入循環中（就像從數據庫中獲取數據一樣），則當我單擊按鈕以顯示數據時，onClick事件會觸發多次，實際上會觸發直到==“ data.length”！

您可以在CodeSandbox上查看完整示例，以獲取更多信息。

在代碼沙箱中，單擊“打開菜單”，您將看到發生了什么。 為了更加清晰，請打開demo.js並在第199行找到“數據”數組，僅設置1個條目，您將看到onClick事件僅運行一次，但是如果您添加更多條目，則onClick事件會越來越多地觸發...

有什么想法嗎？ 謝謝順便說一句。

Answer 1

我已經解決了這個問題（因為我不知道這是否是一個錯誤，所以我稱之為解決方法）。

首先， 將Dialog移出循環 。 我用自定義組件做到了。

class MyDialog extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Dialog
          onClose={this.props.onClose}
          aria-labelledby="simple-dialog-title"
          open={this.props.openState}
        >
          <div>
            <List>
              {this.props.myList.map(e => (
                <ListItem button key={e.id}>
                  <ListItemText primary={e.name} />
                </ListItem>
              ))}
            </List>
          </div>
        </Dialog>
      </div>
    );
  };
}

然后在Loop中這樣調用它：

<Button onClick={this.handleLsClick} data-ids={n.id}>Open Menu</Button>

我可以發布完整的代碼，但是在我們的語言中有一句諺語說：“給大腦施加壓力”。 但是，代碼現在已經完成。

我使用數據集來識別和分離信息。

對我來說，這段代碼並不是我想要的，而是要做更多的工作來分離數據。 但是我認為它回答了這個問題。