React报错：StudentsFilter组件Hooks调用顺序异常原因排查

报错原因 #

你遇到的Hooks调用顺序错误，核心问题是在组件的渲染循环（JSX的map遍历）中调用了useColorModeValue Hook，违反了React Hooks的核心规则：

• Hooks必须在组件的顶层作用域调用，不能在条件判断、循环、嵌套函数或JSX元素的属性中调用
• 每次组件渲染时，Hooks的调用顺序必须完全一致

具体来看你的代码：在batchYear.map和streams.map生成的<Checkbox>组件中，直接在colorScheme属性里调用了useColorModeValue，这会导致每次渲染时，如果batchYear或streams的长度变化，这个Hook的调用次数就会改变，触发React的Hooks顺序检测警告。

修复步骤 #

1. 将useColorModeValue的调用移到组件顶层作用域，提前计算好颜色方案：

const StudentsFilter = () => {
  // ... 其他状态与Hooks

  // 提前在顶层计算颜色方案，避免在循环中调用Hook
  const checkboxColorScheme = useColorModeValue("primaryScheme", "purple");

  // ... 其余逻辑代码
}

2. 在JSX的Checkbox组件中，直接使用提前计算好的变量：

// Batch部分的Checkbox修改
<Checkbox
  key={li}
  value={li}
  colorScheme={checkboxColorScheme}
  size="sm"
  onChange={(e) => batchesHandler(e, li)}
  isChecked={checkedBatches.includes(li)}
>
  <Text fontSize="xs">{li}</Text>
</Checkbox>

// Stream部分的Checkbox修改
<Checkbox
  key={li.id}
  value={li.id}
  colorScheme={checkboxColorScheme}
  size="sm"
  onChange={(e) => streamsHandler(e, li.id)}
  isChecked={checkedStreams.includes(li.id)}
>
  <Text fontSize="xs">{li?.name}</Text>
</Checkbox>

3. 额外修复一处代码错误：getStream函数的catch块中，错误参数为error但打印时用了未定义的e：

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

其他组件排查建议 #

如果另外2-3个组件也出现相同警告，按以下思路排查：

• 检查是否在循环、条件判断、嵌套函数或JSX属性中调用了Hooks
• 确保所有Hooks都在组件顶层作用域调用，调用顺序固定

内容的提问来源于stack exchange，提问作者Milan Poudel