Javascript 重新呈现react 筛选数据过多

const MyComponent = () => {
  const [avaliador, setAvaliador] = useState("");
  const [avaliadoresList, setAvaliadoresList] = useState([]);
  const [DataResultsTotal, setDataResultsTotal] = useState([]);

  const filters = useSelector((state) => state.filter);

  // not all consts is here, only to show the problem

  const fetchData = async (token) => {
    try {
      const responseResult = await axios.get(
        "http://apicall/example/all",
        {
          headers: {
            Authorization: `Bearer ${token}`,
          },
        }
      );

      setDataResultsTotal(responseResult.data);
      setAreaProgs(responseResult.data.length);

      // and continuous some calc to send to updates the state and show to the user
      });
      setError(responseResult.data.erro);
    } catch (error) {
      console.error("something wrong", erro);
    }
  };

  useEffect(() => {
    setToken(localStorage.getItem("token"));
    fetchData(token);
  }, [token]);

  const handleChangeSelect = (event) => {
    setAvaliador(event.target.value);
    dispatch(updateFilters({ ["name"]: event.target.value }));
  };

  const shouldDisplay = (lev) => {
    let matchesSearchText = lev.noEncarregado
      .toUpperCase()
      .includes(filters.noEncarregado);

    // let matchesCategory = lev.id.toLowerCase().includes(filters.ids);
    //  filters.ids.length > 0
    //   ? filters.ids.some((id) => id == lev.category)
    //    : true;
    return matchesSearchText;
  };

  const filteredData = DataResultsTotal.filter((lev) => shouldDisplay(lev));
  setDataResultsTotal(filteredData); // the error goes here

  return (
    <Box
      paddingLeft={isOpen ? "80px" : "200px"}
      bgcolor={`${colors.slate[100]}`}
    >
      <Grid container>
        <Grid item xs={12} sm={6} md={6} lg={6}>
          <Box>
            <Typography
              variant="h4"
              sx={{
                fontWeight: "bold",
                marginLeft: "20px",
                marginTop: "20px",
              }}
            >
              text title
            </Typography>
            <Typography
              variant="h6"
              sx={{
                marginLeft: "20px",
                marginTop: "5px",
                marginBottom: "20px",
              }}
            >
              anotr text
            </Typography>
          </Box>
        </Grid>
        <Grid
          item
          xs={12}
          sm={6}
          md={6}
          lg={6}
          marginTop={"20px"}
          marginBottom={"10px"}
        >
          <Box
            display={"flex"}
            alignItems={"center"}
            height={"100%"}
            justifyContent={"flex-end"}
          >
            <DownloadBtn DownText={true} />
          </Box>
        </Grid>
        <Grid item xs={12} sm={6} md={3} lg={3}>
          <Box sx={{ mx: "10px", my: "5px" }}>
            <Box sx={{ minWidth: 150 }}>
              <FormControl fullWidth>
                <InputLabel id="demo-simple-select-label">
                  texttt
                </InputLabel>
                <Select
                  labelId="demo-simple-select-label"
                  id="demo-simple-select"
                  value={avaliador}
                  label="Avaliador"
                  onChange={handleChangeSelect}
                >
                  {avaliadoresList.map((avaliador) => (
                    <MenuItem key={avaliador} value={avaliador}>
                      {avaliador}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Box>
          </Box>
        </Grid>

        <Grid item xs={6} sm={6} md={3} lg={3}>
          <Box sx={{ mx: "10px", my: "5px" }}>
            <CardHome
              size="h7"
              sizedesc="h3"
              name="text"
              icon={
                <ListAltOutlinedIcon
                  sx={{
                    fontSize: "28px",
                    color: `${colors.greenAccent[800]}`,
                  }}
                />
              }
              description={<Counter from={0} to={showfiltereddata} />}
            />
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
}

好的，我正试着用material 过滤一些东西-UI和Redux，过滤器一切正常，但我不知道我是如何重新计算过滤后的数据并显示给用户的.

在这段代码中，我将从Redux获得状态，带到页面，与从API调用获得的计算数据进行比较，并将其保存在常量上，但我需要再次重新计算这些过滤后的数据，但当我try 这样做时，会抛出"太多重新呈现"，我知道为什么会发生这种情况，但我不知道处理它的更好方法，也许是2useEffects？