渲染的钩子比上一次渲染 REACT 时更多.js

Question

我有一个问题，我正在尝试将值设置为一个状态（选定的Pathway），关于通过 redux 设置的另一个常量（国家标签）。

设置“selectedPatway”后，我想在＜code＞中显示结果

一切都很好，但是当我刷新页面时，我在浏览器中得到一个“渲染的钩子比之前渲染的钩子多”。这是代码：

 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()}
   />
)

我浏览了整个互联网，我认为我已经正确地应用了所有东西（显然不是因为它不工作…）。

• 不有条件地调用钩子
• 在顶层使用挂钩

任何帮助将不胜感激。

Answer 1

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

另外，重新阅读一下钩子的规则文档页面。