Не могу вызвать setState для компонента, который еще не смонтирован - tsx

Question

Я нашел какой-то поток об этой проблеме, но ни один из них не решил мою.

Невозможно вызвать setState для компонента, который еще не смонтирован.Это не работает, но это может указывать на ошибку в вашем приложении.

Невозможно вызвать setState для компонента, который еще не смонтирован

Реагировать приложение.Невозможно вызвать setState для компонента, который еще не смонтирован

import React, { Component } from 'react';
import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap';

class MyComponent extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      collapse: false,
    };
  }

  toggle() {
    this.setState({ collapse: !this.state.collapse });
  }

  render() {
    return (
          <Card>
            <CardHeader>
              <Button color="link" onClick={this.toggle} className="float-right">
                Click me to toggle collapse
              </Button>
            </CardHeader>
            <Collapse isOpen={this.state.collapse}>
              <CardBody>
                The content being collapsed
              </CardBody>
            </Collapse>
          </Card>
    );
  }
}

export default MyComponent;

• Если я введу componentDidMount() { console.log("Mounted!"); }, тогда, конечно, он все равно появится в окне консоли.
• Я пробовал ответы из аналогичных тем, таких как установка babel polyfill, удаление response-hot-loader, но ни один из них не работает.
• Я получаю эту проблему во всех компонентах, которые у меня есть setState и кнопка (иличто-то похожее) для вызова метода.
• У кого-нибудь есть идея исправить?Я ценю каждого из них.Большое спасибо

Answer 1

Почему-то проблема решается, когда я строю производство

. \ Mvnw -Pprod -DskipTests

.Большое спасибо тем, кто провел время, помогая мне.

Answer 2

Вы получаете эту ошибку, потому что вы пытаетесь изменить состояние не смонтированного компонента.Это может произойти, если обратный вызов вызван после того, как компонент был размонтирован из его родителя.

Вы можете отслеживать состояние монтирования компонента следующим образом:

import React, { Component } from 'react';
import { Card, CardHeader, CardBody, Button, Collapse } from 'reactstrap';

class MyComponent extends React.Component<any, any> {
  mounted = false;

  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      collapse: false,
    };
  }

  componentWillMount() { this.mounted = true; }
  componentWillUnmount() { this.mounted = false; }

  toggle() {
    if(this.mounted) {
       this.setState(({collapse}) => ({ collapse: !collapse }));
    }
  }

  render() {
    return (
          <Card>
            <CardHeader>
              <Button color="link" onClick={this.toggle} className="float-right">
                Click me to toggle collapse
              </Button>
            </CardHeader>
            <Collapse isOpen={this.state.collapse}>
              <CardBody>
                The content being collapsed
              </CardBody>
            </Collapse>
          </Card>
    );
  }
}

export default MyComponent;