Question

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

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

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

 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

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

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

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

1 个答案: