Не удается сбросить обновления, когда React уже рендерит - PullRequest
Новая
       31

Не удается сбросить обновления, когда React уже рендерит

9 голосов
/ 21 сентября 2019

Я пытаюсь показать предупреждение, когда API возвращает ошибку.Для окна предупреждения я использую sweetalert2.В моем методе рендеринга я проверяю, содержит ли сообщение об ошибке содержимое.Если он содержит сообщение об ошибке, я хочу показать пользователю предупреждение.

Когда я отправляю форму, я делаю вызов API.Если он возвращает ошибку, редуктор меняет хранилище (состояние) и снова отображает страницу.

Поскольку я добавил строку ниже, я получаю сообщение об ошибке: 

{saveLabelFetchError && this.toggleAlertFailure(saveLabelFetchError)}

Ошибка: 

index.js:1375 Warning: unstable_flushDiscreteUpdates: Cannot flush updates 
when React is already rendering.

Мой компонент: 

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";

import { saveLabelValueRequest } from "../../actions/labels";

import Swal from "sweetalert2";
import "./styles.css";
import Button from "@kof/button";

export class NewLabels extends Component {
  state = {
    labelInput: ""
  };

  inputChangedhandler = e => {
    this.setState({ labelInput: e.target.value });
  };

  toggleAlertFailure = message => {
    Swal.fire({
      type: "error",
      title: "Oops...",
      text: message
    });
  };

  saveLabel = event => {
    event.persist();
    event.preventDefault();
    Swal.fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: "#3085d6",
      cancelButtonColor: "#d33",
      confirmButtonText: "Yes, save it."
    }).then(result => {
      if (result.value) {
        const labelKeyUuid = this.props.labelKey.uuid;
        const labels = event.target.elements.labels.value;
        this.props.saveLabelValue(labelKeyUuid, labels);
      }
    });
  };

  render() {
    const { load, saveLabelFetchError } = this.props;
    return (
      <div>
        <form onSubmit={this.saveLabel}>
          <textarea onChange={this.inputChangedhandler}></textarea>
          <textarea></textarea>
          <Button onClick={() => load(this.state.labelInput)}>Preview</Button>
          <Button type="submit">Save</Button>
        </form>
        {saveLabelFetchError && this.toggleAlertFailure(saveLabelFetchError)}
      </div>
    );
  }
}

NewLabels.propTypes = {
  saveLabelFetchError: PropTypes.string,
  isFetching: PropTypes.bool,
  labelKey: PropTypes.object,
  saveLabelValue: PropTypes.func
};

NewLabels.defaultProps = {
  saveLabelFetchError: "",
  labelKey: {},
  isFetching: false,
  saveLabelValue: () => {}
};

export default connect(
  state => ({
    saveLabelFetchError: state.labelsStore.saveLabelError,
    isFetching: state.labelsStore.isFetching,
    labelKey: state.labelsStore.labelKey
  }),
  dispatch =>
    bindActionCreators(
      {
        saveLabelValue: saveLabelValueRequest
      },
      dispatch
    )
)(NewLabels);

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

...