React出现Rendered more hooks than during the previous render报错求助

你的写法违反了React Hook的核心调用规则：所有Hook必须在React函数组件的顶层、或者自定义Hook的顶层调用。
你写的DefaultValue内部使用了useState、useEffect等Hook，但你是在主组件的JSX返回值中直接作为普通函数执行DefaultValue()，而非将其作为组件渲染、也没有在主组件顶层调用，这会导致每次主组件重渲染时都会重新创建一套Hook实例，刷新页面前后渲染的Hook数量不一致就会触发该报错。

方案1：抽成自定义Hook在主组件顶层调用 #

自定义Hook需要以use开头命名，且必须在组件的最顶层调用，不能嵌套在JSX、条件判断、循环中：

// 抽为自定义Hook
const useSelectedPathway = (options, countryLabel, value) => {
  const matchingOption = options.find((option) => option.value.includes(countryLabel))
  const optionSelected = options.find((option) => option.value === value)

  const [selectedPathway, changeSelectedPathway] = useState(matchingOption)

  // 合并两个useEffect避免赋值冲突，可按需调整优先级
  useEffect(() => {
    let target = matchingOption || options[0]
    // 示例优先级：传入的value > countryLabel匹配项 > 第一个选项
    if (optionSelected) target = optionSelected
    changeSelectedPathway(target)
  }, [countryLabel, value, matchingOption, optionSelected, options])

  return selectedPathway
}

// 主组件内部
function YourMainComponent() {
  // 组件顶层调用自定义Hook，传入所需参数
  const selectedPathway = useSelectedPathway(options, countryLabel, value)

  return (
    <Select value={selectedPathway} />
  )
}

方案2：直接把逻辑写到主组件顶层 #

如果这个逻辑不需要复用，直接写到主组件的顶层即可，不用单独抽函数：

function YourMainComponent() {
  // ... 其他逻辑，获取options、countryLabel、value
  const matchingOption = options.find((option) => option.value.includes(countryLabel))
  const optionSelected = options.find((option) => option.value === value)
  const [selectedPathway, changeSelectedPathway] = useState(matchingOption)

  useEffect(() => {
    let target = matchingOption || options[0]
    if (optionSelected) target = optionSelected
    changeSelectedPathway(target)
  }, [countryLabel, value, matchingOption, optionSelected, options])

  return (
    <Select value={selectedPathway} />
  )
}

• 你之前的两个独立useEffect存在赋值覆盖风险，当countryLabel和value同时变化时，后执行的副作用会覆盖前一个的赋值结果，合并为同一个副作用按优先级判断逻辑更稳定
• 记得补全useEffect的所有依赖项，避免闭包陷阱导致的逻辑异常

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