我有一个表格行，其中我使用material datagrid组件显示dat网格。
这里是codesandbox链接->https://codesandbox.io/s/modern-firefly-ncb3q?file=/src/app.js:1293-1560
现在的问题是，我现在有选项卡，单击每个选项卡，我想过滤数据。
表选项卡的图像
现在我试着用 state 及 useEffect() 带开关箱。但是它不能正常工作，也许有时它会坏掉。现在我正在寻找最好的方法来做到这一点。有人能帮我吗？
另外，当选择它是越来越暗的颜色，我不想这样做。我不想更改所选行的颜色。

import React, { useState, useRef, useCallback } from "react";
import Grid from "@material-ui/core/Grid";
import UnderlineButton from "./Underlinebtn";
import { GrayRectButton } from "./Button";
import { AddEditAssignFormSelect } from "./Select";
import { makeStyles } from "@material-ui/core/styles";
import { DataGrid } from "@material-ui/data-grid";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    paddingTop: 36,
    paddingBottom: 40,
    paddingLeft: 44,
    paddingRight: 34
  },
  title: {
    fontSize: 24,
    fontWeight: 700
  },
  filtersContainer: {
    marginTop: 15,
    padding: "0px 0px 0px 12px"
  },
  formControl: {
    minWidth: 158
  },
  approveAllButton: {
    backgroundColor: "rgba(48, 59, 86, 0.5)",
    color: "white",
    height: "100%",
    borderRadius: 10,
    fontSize: 14,
    "&:hover": {
      backgroundColor: "rgba(48, 59, 86, 0.5)",
      opacity: 0.5
    }
  },
  table: {
    height: 600,
    marginTop: 25,
    width: "100%"
  },
  tableContianer: {
    "& .MuiDataGrid-columnHeader, .MuiDataGrid-cell, .MuiDataGrid-columnsContainer, .MuiDataGrid-cell": {
      border: "none"
    },
    border: "none",
    "& .MuiDataGrid-columnsContainer": {
      borderBottom: `1px solid rgba(78, 89, 185, 1)`
    },
    "& .even-row": {
      backgroundColor: "rgba(250, 250, 255, 1)"
    },
    "& .even-row-cells": {
      justifyContent: "center"
    },
    ".MuiPaginationItem-outlined": {
      border: "3px solid rgba(0,0,0,0.23)"
    }
  },
  buttonAll: {
    padding: "0px 0px 0px 12px"
  }
}));

export default function TableTabs({ rows, columns, CustomPagination }) {
  const classes = useStyles();
  const [valueType, activeValueType] = useState("");
  const [valueAll, ActiveAll] = useState(true);
  const [valueApproved, ActiveApproved] = useState(false);
  const [valueProgress, ProgressActive] = useState(false);
  const [valueDecline, DeclineActive] = useState(false);
  const [loading, setLoading] = useState(false);
  const isMounted = useRef(true);

  React.useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);

  const tableStatus = useCallback(
    async (filterVal) => {
      // don't send again while we are sending
      if (loading) return;
      // update state
      setLoading(true);
      // send the actual request
      await tableStatusUpdate(filterVal);
      // once the request is sent, update state again
      if (isMounted.current)
        // only update if we are still mounted
        setLoading(false);
    },
    [loading]
  ); // update the callback if the state changes

  const tableStatusUpdate = async (filterVal) => {
    activeValueType(filterVal);
    switch (filterVal) {
      case "":
        ActiveAll(true);
        ActiveApproved(false);
        ProgressActive(false);
        DeclineActive(false);
        return;
      case "approve":
        ActiveApproved(true);
        ProgressActive(false);
        DeclineActive(false);
        ActiveAll(false);
        return;
      case "progress":
        ProgressActive(true);
        ActiveApproved(false);
        DeclineActive(false);
        ActiveAll(false);
        return;
      case "decline":
        ProgressActive(false);
        DeclineActive(true);
        ActiveApproved(false);
        ActiveAll(false);
        return;
      default:
        ActiveAll(true);
        return;
    }
  };

  return (
    <Grid className={classes.root}>
      <div>
        <Grid container className={classes.filtersContainer}>
          <Grid lg={6} item container spacing={1}>
            <Grid item alignItems="center" justify="center">
              <UnderlineButton
                active={valueAll}
                alignItems="center"
                justify="center"
              >
                <div onClick={() => tableStatus("")}>All</div>
              </UnderlineButton>
            </Grid>
            <Grid item>
              <UnderlineButton active={valueApproved}>
                <div onClick={() => tableStatus("approve")}>Approved </div>
              </UnderlineButton>
            </Grid>
            <Grid item>
              <UnderlineButton active={valueProgress}>
                <div onClick={() => tableStatus("progress")}> In Progress </div>
              </UnderlineButton>
            </Grid>
            <Grid item>
              <UnderlineButton active={valueDecline}>
                <div onClick={() => tableStatus("decline")}>Decline</div>
              </UnderlineButton>
            </Grid>
          </Grid>
          <Grid lg={6} item container spacing={2} justify={"flex-end"}>
            <Grid item>
              <div className="project-filter-right-area d-flex justify-content-end col">
                <div className="scheduler-navigator"></div>
              </div>
            </Grid>
            <Grid item style={{ width: 158 }}>
              <AddEditAssignFormSelect
                values={[{ value: "None", key: "123" }]}
                sideLabel="All projects"
                name="allProjects"
                onChange={() => null}
                value=""
              />
            </Grid>
            <Grid item>
              <GrayRectButton>Approve All</GrayRectButton>
            </Grid>
          </Grid>
        </Grid>
      </div>
      <div>
        <div className={classes.table}>
          <DataGrid
            rows={rows}
            columns={columns}
            pageSize={9}
            checkboxSelection
            className={classes.tableContianer}
            filterModel={{
              items: [
                {
                  columnField: "status",
                  operatorValue: "contains",
                  value: valueType
                }
              ]
            }}
            getRowClassName={(params) =>
              params.id % 2 === 0 ? "even-row" : null
            }
            getCellClassName={(params) =>
              params.id % 2 === 0 ? "even-row-cells" : "even-row-cells"
            }
            components={{
              Pagination: CustomPagination
            }}
          />
        </div>
      </div>
    </Grid>
  );
}

有人能帮我吗。我是学习模式的新手。谢谢