您正在stationData.map()函数中创建三种不同的模态，并且每一种都依赖于单个 state this.state.open。因此，每当按下按钮时，所有三个按钮都会打开，您会看到最后一个在顶部。所以 3 总是可见的。

您应该做的是-仅创建一个模态并跟踪在新状态下按下了哪个按钮this.state.stationNumber。这样，唯一的模态就会触发，它会知道从状态中渲染什么。

这是您修改后的代码，我在必要时添加了注释：

class Dashboard extends React.Component {
  state = {
    open: false,
    stationNumber: null,
    stationData: [
      { id: 1, number: "1" },
      { id: 2, number: "2" },
      { id: 3, number: "3" }
    ]
  };

  handleOpen = stationNumber => () => {
    // get which button was pressed via `stationNumber`
    // open the modal and set the `stationNumber` state to that argument
    this.setState({ open: true, stationNumber: stationNumber });
  };

  handleClose = () => {
    this.setState({ open: false });
  };
  render() {
    const { stationData } = this.state;

    return (
      <div style={styles.wrapper}>
        <div style={styles.body}>
          <Paper square elevation={0} style={styles.container}>
            {stationData.map((station, index) => (
              <div key={index}>
                <Button
                  variant="contained"
                  color="primary"
                  style={styles.button}
                  // pass which button was clicked as an argument
                  onClick={this.handleOpen(station.number)}
                >
                  {station.number}
                </Button>
              </div>
            ))}
          </Paper>

          {/* add only one modal */}
          <Modal open={this.state.open} onClose={this.handleClose}>
            {/* display the content based on newly set state */}
            <div style={styles.modal}>{this.state.stationNumber}</div>
          </Modal>
        </div>
      </div>
    );
  }
}