收到错误“React 检测到由 StudentsFilter 调用的 Hooks 的顺序发生了变化”

Question

//StudentsFilter.jsx

import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Badge,
  Box,
  Button,
  Checkbox,
  Flex,
  Radio,
  RadioGroup,
  Text,
  useColorMode,
  useColorModeValue,
  VStack,
} from "@chakra-ui/react";
import React, { useState } from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { axiosInstance } from "../../../axiosConfig";
import { commonSlidercss, darkSlidercss } from "../../../GlobalStyles";
import {
  setFilterSearchMode,
  setSearchingBatch,
  setSearchingStream,
} from "../../../redux/slices/adminUserSlice";

const StudentsFilter = () => {
  const [streams, setStreams] = useState(null);
  const [batchYear, setBatchYear] = useState([]);
  const [checkedStreams, setCheckedStreams] = useState([]);
  const [checkedBatches, setCheckedBatches] = useState([]);

  const siteState = useSelector((state) => state.siteReducer);
  const adminUsers = useSelector((state) => state.adminUserReducer);
  
  const filterSearchMode = adminUsers?.filterSearchMode;
  const site = siteState.siteInfo;

  const { colorMode } = useColorMode();

  const dispatch = useDispatch();


  useEffect(() => {
    getStream();
    let batches = [];
    if (site) {
      let year = site.year_established;
      let current_year = new Date().getFullYear();
      let year_diff = current_year - site.year_established;

      for (let i = 0; i <= year_diff; i++) {
        batches.push(year + i);
      }
      setBatchYear(batches);
    }
  }, [site]);

  const getStream = async () => {
    try {
      const res = await axiosInstance.get("stream");
      setStreams(res?.data?.stream);
    } catch (error) {
      console.log("Something went wrong while getting streams", e);
    }
  };

  const streamsHandler = (e, li) => {
    e.stopPropagation();
    const index = checkedStreams.indexOf(li);
    if (index > -1) {
      setCheckedStreams([
        ...checkedStreams.slice(0, index),
        ...checkedStreams.slice(index + 1),
      ]);
    } else {
      setCheckedStreams([...checkedStreams, li]);
    }
  };

  const batchesHandler = (e, li) => {
    e.stopPropagation();
    const index = checkedBatches.indexOf(li);
    if (index > -1) {
      setCheckedBatches([
        ...checkedBatches.slice(0, index),
        ...checkedBatches.slice(index + 1),
      ]);
    } else {
      setCheckedBatches([...checkedBatches, li]);
    }
  };

  useEffect(() => {
    dispatch(setSearchingStream(checkedStreams));
    dispatch(setSearchingBatch(checkedBatches));
  }, [checkedBatches, checkedStreams]);

  return (
    <Flex
      p="6"
      direction="column"
      style={{ height: "inherit" }}
      align="space-between"
      justify="space-between"
      w="300px"
      maxH={231}
      overflowY="scroll"
      css={colorMode === "light" ? commonSlidercss : darkSlidercss}
    >
      <Box>
        <Text fontWeight="medium" fontSize="sm" mb={7}>
          More filters
        </Text>
        <Accordion allowMultiple>
          <AccordionItem>
            <AccordionButton>
              <Box flex="1" fontSize="xs" textAlign="left">
                Batch
              </Box>
              <AccordionIcon />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <RadioGroup>
                <VStack align="start">
                  {batchYear &&
                    batchYear.map((li) => (
                      <Checkbox
                        // onChange={checkboxChange}
                        key={li}
                        value={li}
                        colorScheme={useColorModeValue(
                          "primaryScheme",
                          "purple"
                        )}
                        size="sm"
                        onChange={(e) => batchesHandler(e, li)}
                        isChecked={checkedBatches.includes(li)}
                      >
                        <Text fontSize="xs">{li}</Text>
                      </Checkbox>
                    ))}
                </VStack>
              </RadioGroup>
            </AccordionPanel>
          </AccordionItem>

          <AccordionItem>
            <AccordionButton>
              <Box flex="1" textAlign="left" fontSize="xs">
                Stream
              </Box>
              <AccordionIcon />
            </AccordionButton>
            <AccordionPanel pb={4}>
              <RadioGroup>
                <VStack align="start">
                  {streams &&
                    streams.map((li) => (
                      <Checkbox
                        // onChange={checkboxChange}
                        key={li.id}
                        value={li.id}
                        colorScheme={useColorModeValue(
                          "primaryScheme",
                          "purple"
                        )}
                        size="sm"
                        onChange={(e) => streamsHandler(e, li.id)}
                        isChecked={checkedStreams.includes(li.id)}
                      >
                        <Text fontSize="xs">{li?.name}</Text>
                      </Checkbox>
                    ))}
                </VStack>
              </RadioGroup>
            </AccordionPanel>
          </AccordionItem>
        </Accordion>
      </Box>
      <Box>
        <Button
          width="full"
          h="40px"
          borderRadius="10px"
          fontWeight="500"
          variant="primary"
          mt="10px"
          onClick={() => dispatch(setFilterSearchMode(!filterSearchMode))}
        >
          Filter
        </Button>
      </Box>
    </Flex>
  );
};

export default StudentsFilter;

为什么我收到错误“React 检测到由 StudentsFilter 调用的 Hooks 的顺序发生了变化。如果不修复，这将导致错误和错误”我在 2-3 个组件中看到此警告并尝试纠正它，但我不知道我做错了什么？ 有人可以帮我识别吗？

Answer 1

您在 return 语句中有条件地（并且在循环中）调用useColorModeValue 。 这可能是错误的根源。 您应该使用 ESLint 和“钩子规则”规则，它会直接在您的编辑器中突出显示。