道具类型失败：提供给“ForwardRef(TablePagination)”的“string”类型的道具“count”无效，应为“number”

Question

我的React App出现错误。 我正在使用Material UI 。 当我访问此页面时出现此错误。 根据错误，我在 TablePagination 中遇到错误，但我什至没有使用 TablePagination 组件。 我正在使用Material UI 版本 4 的 Data Grid 组件。它启用了服务器端分页，我将行数作为行数传递。（下面是代码。） MiList组件正在使用Data Grid 。

import React, { useState, useEffect, useRef, memo } from "react";
import { MiButton, MiLink, MiList } from "../../../components/Standard/MiView";
import CreateNewPropertyModal from "./CreateNewPropertyModal";
import { THEME } from "../../../components/Standard/theme";
import { Chip } from "@miview/components";
import "./StyleTable.css";
import { debounce } from "../../../utils";
import { homeSearchHook } from "./utils";
import { formatDate } from "../../../helpers/dateTools";
import {
  systemTypeService,
  stageTypeService,
  propertyService,
} from "@miview/api";
import { SYSTEM_TYPE_CATEGORIES } from "@miview/constants";
import { useComponentState } from "@miview/hooks";
import { MiTHEME } from "@miview/theme";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(() => ({
  tableStyles: {
    border: 0,
    "& .MuiDataGrid-columnHeaderTitleContainer": {
      padding: 0,
    },
    "& .MuiDataGrid-columnSeparator": {
      visibility: "hidden",
    },
  },
}));
const Properties = memo((props) => {
  const [newPropertyInProgress, setNewPropertyInProgress] = useState();
  const [newOutlineInProgress, setNewOutlineInProgess] = useState();
  const [stageTypes, setStageTypes] = useState([]);
  const [garageSwingTypes, setGarageSwingTypes] = useState([]);
  const [changed, setChanged] = useState(false);
  const [sorted, setSorted] = useState([]);
  const [addressInfo, setAddressInfo] = useState(null);
  const [properties, setproperties] = useState([]);
  const [pageNo, setpageNo] = useState(0);
  const [pageSize, setpageSize] = useState(50);
  const [rowCount, setrowCount] = useState(0);
  const [searchTerm, setsearchTerm] = useState("");
  // const [setupStatuses, setSetupStatuses] = useState([]);
  const [homesMessage, getHomes] = homeSearchHook();
  const [hasUserSearched, setHasUserSearched] = useState(false);
  const debouncedSearchTerm = debounce(searchTerm, 300);
  const isFirstRun = useRef(true);
  const classes = useStyles();
  const getColor = (val) => {
    switch (val) {
      case "Stage Complete":
        return MiTHEME.colors.green.light;
      case "Scheduled":
        return MiTHEME.colors.blue.light;
      case "Not Scheduled":
        return MiTHEME.colors.bluegrey.light;
      case "Not Ready":
        return MiTHEME.colors.bluegrey.light;
      default:
        return MiTHEME.colors.blue.light;
    }
  };
  const getTextColor = (val) => {
    switch (val) {
      case "Stage Complete":
        return MiTHEME.colors.green.primary;
      case "Scheduled":
        return MiTHEME.colors.blue.primary;
      case "Not Scheduled":
        return MiTHEME.colors.bluegrey.primary;
      case "Not Ready":
        return MiTHEME.colors.bluegrey.primary;
      default:
        return MiTHEME.colors.blue.primary;
    }
  };
  const stateManager = useComponentState();
  useEffect(() => {
    handleSearchHomes();
    isFirstRun.current = false;
  }, [debouncedSearchTerm]);

  const handleSearchHomes = () => {
    setHasUserSearched(!isFirstRun.current);
    setpageNo(0);
    filterData({
      page: 0,
      searchTerm: debouncedSearchTerm,
    });
  };

  useEffect(() => {
    // getSetupStatuses();
    getStageTypes();
    getGarageSwingTypes();
  }, []);

  // const getSetupStatuses = async () => {
  //   stateManager.run(async () => {
  //     const response = await propertyService.getSetupStatuses();
  //     setSetupStatuses(response);
  //   });
  // };

  const getStageTypes = async () => {
    stateManager.run(async () => {
      stageTypeService.getAll({}).then((response) => {
        setStageTypes(response.filter((r) => r.stageOrder !== -1));
      });
    });
  };

  const getGarageSwingTypes = async () => {
    stateManager.run(async () => {
      const response = await systemTypeService.getSystemTypesByName({
        name: SYSTEM_TYPE_CATEGORIES.GARAGE_SWING,
      });
      const mapped = response.map((i, k) => {
        return { value: i.systemTypeId, key: k, text: i.mainValue };
      });
      setGarageSwingTypes(mapped);
    });
  };

  useEffect(() => {
    if (!changed && stageTypes.length > 0) {
      let stageTypesToChange = stageTypes;
      stageTypesToChange.push({ stageTypeName: "No Stage" });
      setStageTypes(stageTypesToChange);
      setChanged(true);
    }
  }, [stageTypes]);

  // const getPropertySetupStatusFromCustomFields = (customFieldsJson) => {
  //   if (!customFieldsJson) return false;

  //   const fields = JSON.parse(customFieldsJson);
  //   const propertySetupStatuses = fields.find(
  //     (f) => f.name === "PropertySetupStatus"
  //   )?.value;
  //   const statusReducer = (a, s) =>
  //     a &&
  //     propertySetupStatuses.filter((ps) => ps.id == s.statusId && ps.value)
  //       .length > 0;

  //   return setupStatuses.reduce(statusReducer, true);
  // };

  const filterData = (params = {}) => {
    stateManager.run(async () => {
      getHomes(
        params.page !== undefined ? params.page : pageNo,
        params.pageSize || pageSize,
        params.sorted || sorted,
        params.searchTerm || searchTerm,
        isFirstRun.current,
        setpageNo,
        setpageSize,
        setrowCount,
        setproperties
      );
    });
  };

  const toggleModal = () => {
    setNewPropertyInProgress(!newPropertyInProgress);
  };

  const headerContent = (
    <MiButton
      title="Home"
      icon="add"
      inverse={true}
      onClick={toggleModal}
      color={THEME.GREEN_PRIMARY}
    />
  );
  const renderHeader = ({ colDef }) => {
    return (
      <div
        style={{
          color: MiTHEME.colors.blue.primary,
          fontWeight: MiTHEME.fontWeight.bold,
        }}
      >
        {colDef.headerName}
      </div>
    );
  };
  const columns = [
    {
      field: "addressLine1",
      headerName: "Address",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 1,
      renderCell: (p) => {
        return (
          <MiLink
            to={"/homes/" + p.propertyId}
            title={p.value}
            style={{ marginLeft: -8 }}
          />
        );
      },
    },
    {
      field: "cityName",
      headerName: "City",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 0.7,
    },
    {
      field: "state",
      headerName: "State",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 0.6,
    },
    {
      field: "community",
      headerName: "Community",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 1,
    },
    {
      field: "builder",
      headerName: "Builder",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 1,
    },
    {
      field: "currentStage",
      headerName: "Stage",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 0.8,
      renderCell: (p) => {
        return (
          <MiLink
            to={"/stages/" + p.currentStageId}
            title={p.value}
            style={{ marginLeft: -8 }}
          />
        );
      },
    },
    {
      field: "currentStageScheduledDate",
      headerName: "Schedule Date",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 1,
      valueFormatter: (params) => {
        return formatDate(params.value);
      },
    },
    {
      field: "propertyStatus",
      headerName: "Status",
      width: 150,
      renderHeader: renderHeader,
      headerAlign: "left",
      align: "left",
      flex: 1,
      renderCell: ({ value }) => {
        return (
          <Chip
            text={value}
            style={{
              display: "flex",
              borderRadius: "30px",
              height: "30px",
              minWidth: "80px",
              justifyContent: "center",
              padding:'0 7px 0 7px'
            }}
            color={getColor(value)}
            textColor={getTextColor(value)}
          />
        );
      },
    },
  ];

  const toggleOutliner = () => {
    setNewOutlineInProgess(!newOutlineInProgress);
  };

  useEffect(() => {
    if (addressInfo) {
      toggleOutliner();
    }
  }, [addressInfo]);

  const modals = [
    newPropertyInProgress ? (
      <CreateNewPropertyModal
        key={0}
        getAddressInfo={setAddressInfo}
        toggle={toggleModal}
        stageTypes={stageTypes}
        garageSwingTypes={garageSwingTypes}
        history={props.history}
      ></CreateNewPropertyModal>
    ) : (
      ""
    ),
  ];

  return (
    <>
      {stateManager.statusTag("propertyListStatus")}
      <MiList
        data={properties}
        headerTitle={`Homes - ${hasUserSearched ? "All" : "Recent"}`}
        headerIcon={"home"}
        className={classes.tableStyles}
        getRowId={(row) => row.propertyId}
        headerContent={headerContent}
        modals={modals}
        callouts={null}
        columns={columns}
        manual
        defaultPageSize={50}
        pages={rowCount}
        fetchData={isFirstRun.current ? () => null : filterData}
        setSearch={setsearchTerm}
        disableSearchButton
        searchMessage={homesMessage}
        disableColumnMenu
        hideFilters
        mui
      />
    </>
  );
});

export default Properties;

Answer 1

我发现了同样的错误。 但我正在使用表格来显示详细信息，并使用它来更改表格页面。 在这里，如果我只通过 count={orders.data.total} 我就会遇到错误。 但是当我设置默认值 0 或任何数字时，它是固定的。 有点像 count={orders.data.total || 0}

<TablePagination
                className={classes.tablePagination}
                rowsPerPageOptions={[10, 25, 50, 100]}
                component="div"
                count={orders?.data?.total || 0}
                rowsPerPage={rowsPerPage}
                page={page}
                onPageChange={handleChangePage}
                onRowsPerPageChange={handleChangeRowsPerPage}
            />