Как добавить счетчик перед загрузкой данных API? - PullRequest
Новая
       53

Как добавить счетчик перед загрузкой данных API?

0 голосов
/ 27 января 2020

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

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import { Table } from "react-bootstrap";
import ConfirmModal from "../../components/confirmationModal/ConfirmModal";
import ToastModal from "../../components/Toast/ToastModal";
import { regionActions } from "./ducks";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import "./regionManagement.scss";
import Spinner from "../../components/spinner/spinner";
import "../../components/channelList/channelList.scss";

class RegionList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      regionId: "",
      deleted: false,
      showModal: false,
      handlerFunction: "",
      hasError: false
    };

    this.onSubmitHandler = this.onSubmitHandler.bind(this);
  }

  onSubmitHandler() {
    if (this.state.handlerFunction === "Delete") {
      this.props.regionActions.deleteRegion(this.state.regionDetails);
    }
  }

  handleStateChange = ({ regionId, deleted, showModal, handlerFunction }) => {
    //an alternative is 'props' for here.. but here the props have been destructured..
    this.setState({
      regionId: regionId,
      deleted: deleted,
      showModal: showModal,
      handlerFunction: handlerFunction
    });
  };

  render() {
    const { regions, showStatusMessage } = this.props; //regions should be taken as props - if to take them as state , regions should be set to the state using getDerivedStateFromProps
    let renamedFunction, renamedMessage, renameFailedMessage;

    if (this.state.handlerFunction && this.state.handlerFunction === "Delete") {
      renamedFunction = "Delete";
      renamedMessage = "deleted";
      renameFailedMessage = "delete";
      // } else if (this.props.editForm) {
    } else if (this.props.mode == "edit") {
      renamedFunction = "Edit";
      renamedMessage = "edited";
      renameFailedMessage = "edit";
    } else if (this.props.mode == "add") {
      renamedFunction = "Add";
      renamedMessage = "added";
      renameFailedMessage = "add";
    } else {
      renamedFunction = "";
      renamedMessage = "";
      renameFailedMessage = "";
    }
    let regionTableRender;
    return (
      <>
        <table id="mytable" className="table">
          <thead>
            <tr className="table-head">
              <th className="table-header-font">Name</th>
            </tr>
          </thead>
          <tbody>
            {(regions.loading == true && regions.data == null) ?
            <Spinner /> : 

            {
              regions.data.map((region, i) => {
                return (
                  <tr>
                    <td className="data">
                      <span>{region.name}</span>

                      <div className="myDetails">
                        <a href="#" onClick={() => this.props.viewForm(region)}>
                          <h5 className="table-header-font">
                            View<span className="vertical-attr">|</span>
                          </h5>
                        </a>
                        <span className="vertical-attr"></span>

                        <a href="#" onClick={() => this.props.editForm(region)}>
                          <h5 className="table-header-font">
                            Edit<span className="vertical-attr">|</span>
                          </h5>
                        </a>
                        <span className="vertical-attr"></span>

                        <a
                          href="#"
                          onClick={() =>
                            this.setState({
                              regionDetails: region,
                              deleted: true,
                              showModal: true,
                              handlerFunction: "Delete"
                            })
                          }
                        >
                          <h5
                            style={{ color: "red" }}
                            className="table-header-font"
                          >
                            Delete
                          </h5>
                        </a>
                      </div>
                    </td>
                  </tr>
                );
              })
            }
          }
          </tbody>
        </table>
        <ConfirmModal
          show={this.state.showModal}
          onHide={() => this.setState({ showModal: false })}
          onHandlerClick={this.onSubmitHandler}
          status={this.state.handlerFunction}
        />

        {showStatusMessage ? (
          this.props.hasError === true ? (
            // !this.props.status ? (
            <ToastModal
              show={"Fail"}
              function={this.state.handlerFunction + " " + "Region"}
              message={
                this.state.errorMessage
                  ? this.state.errorMessage
                  : `Failed to ${renameFailedMessage} the region`
              }
            />
          ) : this.props.hasError === false ? (
            <ToastModal
              show={"Success"}
              function={renamedFunction + " Region"}
              message={`Successfully ${renamedMessage} the region`}
            />
          ) : null
        ) : null}
      </>
    );
  }
}

function mapStateToProps(state) {
  return {
    ...state.Regions
  };
}

function mapDispatchToProps(dispatch) {
  return {
    regionActions: bindActionCreators(regionActions, dispatch)
  };
}
export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(RegionList)
);

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

Ответы [ 3 ]

1 голос
/ 27 января 2020

Проверьте, что у ваших начальных данных объекта регионов есть регионов. Регион === ноль и регионов.загрузка === правда 

          {
            (regions.loading === true && regions.data === null) ?   // change == to === and condition as you are having data in your regions object
            <Spinner /> : 

            { your component }

          }
0 голосов
/ 28 января 2020

Все еще не работает .. 

   <tbody>
            {regions.loading === true && regions.data === null ? (
              <Spinner />
            ) : (
              regions.data.map((region, i) => {
                return (
                  <tr>
                    <td className="data">
                      <span>{region.name}</span>

                      <div className="myDetails">
                        <a href="#" onClick={() => this.props.viewForm(region)}>
                          <h5 className="table-header-font">
                            View<span className="vertical-attr">|</span>
                          </h5>
                        </a>
                        <span className="vertical-attr"></span>

                        <a href="#" onClick={() => this.props.editForm(region)}>
                          <h5 className="table-header-font">
                            Edit<span className="vertical-attr">|</span>
                          </h5>
                        </a>
                        <span className="vertical-attr"></span>

                        <a
                          href="#"
                          onClick={() =>
                            this.setState({
                              regionDetails: region,
                              deleted: true,
                              showModal: true,
                              handlerFunction: "Delete"
                            })
                          }
                        >
                          <h5
                            style={{ color: "red" }}
                            className="table-header-font"
                          >
                            Delete
                          </h5>
                        </a>
                      </div>
                    </td>
                  </tr>
                );
              })
            )}
          </tbody>
0 голосов
/ 27 января 2020

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

state = {
    region: {
        data: //data,
        loading: false
    }
}

Когда вы выполняете вызов выборки, вам также необходимо переключить эту переменную loading ... что-то вроде этого в вашем файле редуктора -: 

case FETCH_REGION_DETAILS:
    return {loading: true,...initialState}

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

case FETCH_REGION_DETAILS_SUCCESS:
    return {loading: false, data: action.payload.data}

Также в компоненте мы получим переменную для этого и используем ее для загрузки (это даст очень реалистичные c оценки от загрузки), и это позволит избежать любого вида сбоя.

...