无法在已卸载的组件上执行React状态更新。这是一项禁止操作的操作

Question

我有以下代码：

export class ProductsCategory extends Component {
constructor() {
    super();
    // Title page
    document.title = "products category";
    // Varables url
    let { getAllRows, changeOrder, changeTitle, changeIsActive } = new APIs().ProductsCategoryApi();
    this.state = {
        bindData: [],
        loading: true,
        getAllRowsUrl: getAllRows,
        changeTitleUrl: changeTitle,
        changeOrderUrl: changeOrder,
        changeIsActiveUrl: changeIsActive,
    };
    // Bind table
    this.bindTable();
}

bindTable = () => {
    // Bind table
    (async () => {
        let response = await fetch(this.state.getAllRowsUrl);
        // if HTTP-status is 200-299
        if (response.ok) {
            this.setState({
                bindData: await response.json(),
                loading: false
            });
            return;
        }
        Notify.bindData(false);
    })();
}

reloadTable = () => { }

componentDidUpdate() {
    this.bindTable();
}

render() {  Some code  };}

更改页面时，我在控制台标签中看到此错误：

“无法在已卸载的组件上执行React状态更新。这是无操作，但表明您的应用程序内存泄漏。要修复，取消componentWillUnmount方法中的所有订阅和异步任务”

Answer 1

您需要清理订阅。您可以使用AbortController来实现。看看this post