相关疑难解决方法(0)

我正在尝试将值列表传递给按钮。单击按钮时，应该会出现具有特定映射值的模态，但在我的情况下，只有数组中的最后一个值(3)出现在所有模态中...我应该如何修复它？

  state = {
    open: false,
    stationData : [
      { id:1, number:'1' },
      { id:2, number:'2' },
      { id:3, number:'3' }
    ],
  };

  handleOpen = () => {
    this.setState({ open: true });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    const {stationData} = this.state;
    {stationData.map((station,index) => (
        <div key={index}>
            <Button variant="contained" color="primary" style={styles.button} onClick={this.handleOpen}>
                {station.number}
            </Button>
            <Modal 
                open={this.state.open} 
                onClose={this.handleClose} 
                aria-labelledby={index} 
                aria-describedby={index}
            >
                <div style={styles.modal}>
                    {station.number}
                </div>
            </Modal>
        </div>
    ))}
  }

查看此代码沙箱