按钮 onClick 事件不更新组件状态

我正在使用React-bootstrap来显示删除确认模式

这是我的确认模型

import React from "react";
import PropTypes from "prop-types";
import Button from "@material-ui/core/Button";
import Modal from "react-bootstrap/lib/Modal";
import "./ConfirmationModal.scss";

class ConfirmationModal extends React.PureComponent {
  render() {
    return (
      <Modal
        {...this.props}
        size="md"
        aria-labelledby="contained-modal-title-vcenter"
        centered
        className="confirmation-modal"
      >
        <Modal.Header closeButton />
        <Modal.Body>
          <h4>Are you sure you want to delete?</h4>
          <p>{`You are about to delete ${this.props.deleteItem}`}</p>
        </Modal.Body>
        <Modal.Footer>
          <Button className="cancel-btn btn" onClick={this.props.onHide}>
            {"No, Cancel"}
          </Button>
          <Button className="delete-btn btn" onClick={this.props.onDelete}>
            {"Yes, Delete"}
          </Button>
        </Modal.Footer>
      </Modal>
    );
  }
}

ConfirmationModal.propTypes = {
  onClick: PropTypes.func,
  onDelete: PropTypes.func,
  deleteItem: PropTypes.string
};

ConfirmationModal.defaultProps = {
  onClick: () => {},
  onDelete: () => {},
  deleteItem: null
};

export { ConfirmationModal as default };

这是它被调用的页面（最终，我会将代码片段添加到 GridCommandCell 删除函数中，但为简单起见，我正在创建 Button

import React from "react";
import PropTypes from "prop-types";
import Button from "@material-ui/core/Button";
import { Grid, GridColumn as Column } from "@progress/kendo-react-grid";
import GridLoader from "../../../common/utils/grid-loader";
import GridCommandCell from "../../../common/grid-command-cell";

import ConfirmationModal from "../../../common/confirmation-modal";
import "./UserGrid.scss";

class UserGrid extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      modalShow: false,
      gridData: { data: [], total: 0 },
      dataState: {
        take: 10,
        skip: 0,
        filter: [],
        sort: [
          {
            field: "Id",
            dir: "desc"
          }
        ]
      }
    };

    this.grid = React.createRef();
  }

  dataRecieved = gridData => {
    this.setState(prevState => ({
      ...prevState,
      gridData
    }));
  };

  dataStateChanged = e => {
    const index = e.data.filter.filters.findIndex(x => x.field === "Role.Name");

    if (index >= 0) e.data.filter.filters[index].ignoreCase = true;

    this.setState(prevState => ({
      ...prevState,
      dataState: e.data
    }));
  };

  refresh = () => {
    this.grid.refresh();
  };

  render() {
    const result = (
      <div className="gridContent-grid">
        <Grid
          id="user-grid"
          filterable
          sortable
          pageable={{
            buttonCount: 5,
            info: false,
            type: "numeric",
            pageSizes: false,
            previousNext: false
          }}
          {...this.state.dataState}
          {...this.state.gridData}
          onDataStateChange={this.dataStateChanged}
        >
          <Column field="Id" filter="numeric" title="Id" />
          <Column field="FirstName" title="First Name" />
          <Column field="LastName" title="Last Name" />
          <Column field="Role.Name" title="Role" />
          <Column
            className="command-btn"
            width="100%"
            cell={props => {
              const commandCell = (
                <GridCommandCell
                  onEdit={() => this.props.onEdit(props.dataItem.Id)}
                  // I need to set the onDelete to on click, activate modal
                  // onDelete={() => this.props.onDelete(props.dataItem.Id)}
                  onClick={() => this.setState({ modalShow: true })}
                />
              );
              return commandCell;
            }}
            filterable={false}
            sortable={false}
          />
          <ConfirmationModal
            show={this.state.modalShow}
            onHide={() => this.setState({ modalShow: false })}
            // onDelete={() => this.props.onDelete(dataItem.Id)}
            // deleteItem={`${dataItem.FirstName} ${dataItem.LastName}`}
          />
        </Grid>
        <GridLoader
          url="/odata/users?$select=Id, FirstName, LastName&$expand=Role&count=true&"
          dataState={this.state.dataState}
          onDataRecieved={this.dataRecieved}
          ref={grid => {
            this.grid = grid;
          }}
        />
        <Button
          variant="contained"
          className="delete-btn btn"
          type="button"
          onClick={() => {
            console.log(this.state);
            () => this.setState({ modalShow: true });
            console.log(this.state);
          }}
        >
          <span className="button-label">Delete modal</span>
        </Button>
      </div>
    );

    return result;
  }
}

UserGrid.propTypes = {
  onEdit: PropTypes.func,
  onDelete: PropTypes.func
};

UserGrid.defaultProps = {
  onEdit: () => {},
  onDelete: () => {}
};

export { UserGrid as default };

我正在尝试通过React-bootstrap Modals 中记录的 onClick 事件更新模态的状态

通过这个按钮

       <Button
          variant="contained"
          className="delete-btn btn"
          type="button"
          onClick={() => {
            console.log(this.state);
            () => this.setState({ modalShow: true });
            console.log(this.state);
          }}
        >
          <span className="button-label">Delete modal</span>
        </Button>

但是，我的console.log陈述都返回了modalShow: false

我无法弄清楚为什么在 onClick 事件之后状态不会更新。

请协助。谢谢！