时间戳

首页 > 解决方案 > 比之前的渲染 REACT.js 渲染了更多的钩子

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

问题描述

我有一个问题，我正在尝试为通过 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()}
   />
)

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

任何帮助将不胜感激。

标签： javascriptreactjsreduxuse-effect

解决方案

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

此外，请重新阅读“Hooks 规则”文档页面。

推荐阅读