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

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

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

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

{saveLabelFetchError && this.toggleAlertFailure(saveLabelFetchError)}

ошибка:

index.js: 1375 Предупреждение: unstable_flushDiscreteUpdates: невозможно обновить обновления когда React уже рендерит.

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

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);

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: "", prevSaveLabelFetchError: "" }; static getDerivedStateFromProps(props, state) { if (props.saveLabelFetchError !== state.prevSaveLabelFetchError) { this.toggleAlertFailure(props.saveLabelFetchError); return { prevSaveLabelFetchError: props.saveLabelFetchError }; } return null; } 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 } = 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> </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);

Ответ 1