太多重新渲染 - React - 过滤数据

Question

  const MyComponent = () => {  
  const [avaliador, setAvaliador] = useState("");
  const [avaliadoresList, setAvaliadoresList] = useState([]);
  const filters = useSelector((state) => state.filter);
  const [DataResultsTotal, setDataResultsTotal] = useState([]);

// 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>

嗯，我正在尝试使用 mui 材质和 Redux 进行选择来过滤某些内容，过滤器一切正常，但我不知道如何重新计算过滤后的数据并向用户显示......

在这段代码中，我将从 Redux 获取状态，带到页面，与 API 调用生成的计算数据进行比较，并将其保存在 const 中，但我需要再次重新计算这些过滤后的数据，但是当我尝试时为此，会抛出“太多重新渲染”，我知道为什么会发生，但我不知道更好的方法来处理它，也许有两个用途？

Answer 1

不要将令牌保留在状态中。

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