Question

在加载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)
);

我是这项技术的初学者，请帮助我解决这个问题...

Answer 1

检查您的初始区域对象数据是否具有regions.data === null和regions.loading === true

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

            { your component }

          }

Answer 2

您需要在region属性中以Redux状态添加加载变量。您的redux状态结构应如下所示：:

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}

在组件中，我们还将为此获取一个变量并将其用于加载（这将从加载中得出非常实际的估计），并且可以避免任何类型的故障。

Answer 3

它仍然不起作用。

$(document).ready(function(){
    $('input.checkD[type="checkbox"]').click(function(){
        if($(this).prop("checked") == true){
            $(this).val('true');
        }
        else if($(this).prop("checked") == false){
            $(this).val('false');
        }
    });
});

如何在加载API数据之前添加微调框？

3 个答案: