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