比之前的渲染 REACT.js 渲染了更多的钩子答案

【问题标题】：Rendered more hooks than during the previous render REACT.js比之前的渲染 REACT.js 渲染了更多的钩子
【发布时间】：2021-09-12 09:37:36
【问题描述】：

我有一个问题，我正在尝试为通过 redux 设置的另一个 const (countryLabel) 设置一个状态 (selectedPathway) 的值。

一旦设置了“selectedPatway”，我想在<Select value={selectedPathway} />中显示结果这个选择是由围绕所有逻辑的主要组件返回的。

一切正常，但是当我刷新页面时，我在浏览器中看到“渲染的钩子比上一次渲染时更多”。代码如下：

 const DefaultValue = () => {
    let matchingOption = options.find((option) => option.value.includes(countryLabel))
    let optionSelected = options.find((option) => option.value === value)
  
    const [selectedPathway, changeSelectedPathway] = useState(matchingOption)
  
    useEffect(() => {
      let test = []
      if(matchingOption) {
        test = matchingOption
      } else {
        test = options[0]
      }
      changeSelectedPathway(test)
      
    },[countryLabel])

    useEffect(() => {
      changeSelectedPathway(optionSelected)
    },[value])

     return selectedPathway
  }

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

我浏览了整个互联网，我认为我已经正确应用了所有内容（显然不是因为它不起作用......）。

不按条件调用钩子
在顶层使用钩子

任何帮助将不胜感激。

【问题讨论】：

标签： javascript reactjs redux use-effect

【解决方案1】：

countryHasChanged 和 UsePrevious 虽然不会导致这个显式错误，但它们都是钩子（因为它们调用其他钩子），但不是这样写的。挂钩必须以 use 开头，并带有小写的 u。一般来说，我建议你启用 eslint 和 react hooks eslint 规则（如果你使用 create-react-app，可能是预先配置的），因为该扩展可能会告诉你项目中的大量其他 hooks 违规，最终也会向您显示触发此错误的钩子违规的来源。

另外，请重新阅读Rules of Hooks documentation page。

【讨论】：