Как исправить ошибку «Не удается выполнить обновление состояния React для неустановленного компонента». - PullRequest
0 голосов
/ 13 июня 2019

У меня ошибка:

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 Спасибо за ответ и извините за мой английский

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...