如何解决“无法在已卸载的组件上执行React状态更新”。

Question

我遇到了错误：

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in TableButton (at requestTaskModal.jsx:105)
    in td (at requestTaskModal.jsx:104)
    in tr (at requestTaskModal.jsx:96)

这是我的组成部分

class TableButton extends Component {
  constructor(props) {
    super(props);
    this.toggleTooltip = this.toggleTooltip.bind(this);
    this.state = {
      tooltipOpen: false
    };
  }

  toggleTooltip() {
    this.setState({
      tooltipOpen: !this.state.tooltipOpen
    });
  }

  render() {
    const { tooltipOpen } = this.state;
    const {
      placement,
      target,
      onClick,
      icon,
      tooltipContent,
      disabled,
      invisible,
      isLoading,
      loadingMessage
    } = this.props;
    return (
      <React.Fragment>
        <Button
          title={tooltipContent}
          id={target}
          color="ghost-dark"
          className={`btn-square align-middle ${invisible && "invisible"}`}
          onClick={onClick}
          disabled={disabled}
        >
          {isLoading ? (
            <i className="fa fa-circle-o-notch fa-lg fa-spin" />
          ) : (
            <i className={icon} />
          )}
        </Button>
        <Tooltip
          placement={placement}
          isOpen={tooltipOpen}
          target={target}
          toggle={this.toggleTooltip}
        >
          {isLoading ? loadingMessage : tooltipContent}
        </Tooltip>
      </React.Fragment>
    );
  }
}

export default TableButton;

这是我的父组件

renderDivisionsRequestTaskForwarded(requestTask) {
    if (requestTask.divisionRequestTasks) {
      return (
        <React.Fragment>
          <h5>Divisions</h5>
          <Table borderless responsive size="sm" className="table-hover">
            <tbody>
              {requestTask.divisionRequestTasks.map(divisionRequestTask => (
                <tr key={divisionRequestTask.id}>
                  <td className="align-middle">
                    {divisionRequestTask.division.name}
                    <div className="small text-muted">
                      <i className="cui-calendar" />{" "}
                      {moment(divisionRequestTask.date).format("MMMM D YYYY")}
                    </div>
                  </td>
                  <td className="align-middle text-right">
                    <TableButton
                      placement="left"
                      target={`edit-button-div-${divisionRequestTask.id}`}
                      onClick={() =>
                        this.handleRemoveDivisionRequestTask(
                          divisionRequestTask.id
                        )
                      }
                      icon="cui-trash"
                      tooltipContent="Remove"
                      invisible={requestTask.requestTaskAccomplished}
                      isLoading={divisionRequestTask.id === 5}
                      loadingMessage="Removing..."
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </Table>
        </React.Fragment>
      );
    }
  }

当我执行此代码时

onClick={() =>
     this.handleRemoveDivisionRequestTask(
          divisionRequestTask.id
 )

它将删除一个对象到一个对象中，该对象包含一个映射到renderDivisionsRequestTaskForwarded中的对象数组。我的问题是每次执行删除操作时，它将删除在每个对象中创建的TableButton组件。导致上述错误的数组，以及当我删除此行代码时

<Tooltip
          placement={placement}
          isOpen={tooltipOpen}
          target={target}
          toggle={this.toggleTooltip}
        >
          {isLoading ? loadingMessage : tooltipContent}
        </Tooltip>

错误消失了。请帮助我如何将Tooltip组件中的TableButton组件保留下来。感谢您的答复，对不起我的英语