Проблемы с изменениями состояния в методе отправки формы AtlasKit - PullRequest
Новая
       41

Проблемы с изменениями состояния в методе отправки формы AtlasKit

1 голос
/ 18 апреля 2019

В методе submit Atlaskit Form я хочу изменить значение свойства состояния, в результате чего форма будет скрыта: 

<Form onSubmit={data => {
    return new Promise(resolve => {
        setShowForm(false);
        resolve();
    })
  }}>
</Form>

Однако это приводит к Reactошибка:

Невозможно выполнить обновление состояния React для отключенного компонента.Это не работает, но это указывает на утечку памяти в вашем приложении.Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.

Ошибка исчезает, когда я задаю это значение чуть позже: 

setTimeout(() => setShowForm(false));

Так что, очевидно, форма все ещеразмонтирование при изменении состояния (хотя я не знаю, почему это должно влиять на форму, но я пока не слишком знаком с React).Какой подход я должен использовать здесь?

1 Ответ

0 голосов
/ 18 апреля 2019

Это потому, что вы сделали асинхронный запрос к API, запрос (например, Promise) еще не разрешен, но вы размонтируете компонент.

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

// Пример кода 

class Form extends Component {
  _isMounted = false;

  constructor(props) {
    super(props);

    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    this._isMounted = true;

    axios
      .get('my_api_url')
      .then(result => {
        if (this._isMounted) {
          this.setState({
            data: result.data.data,
          });
        }
      });
  }

  componentWillUnmount() {
    this._isMounted = false;
  }

  render() {
    ...
  }
}
...