Question

我重新编辑了这个问题，因为它不相关...当我启动我的应用程序时，我的浏览器出现了一个问题，这个问题是：

<块引用>

比上一次渲染时渲染了更多的钩子。

我已经浏览了整个互联网，但仍然无法使其正常工作。这是我的代码：

const DefaultValue = () => {
    let matchingOption = options.find((option) => option.value.includes(countryLabel))
    let optionSelected = options.find((option) => option.value === value)
  
    const hasCountryLabelChanged = countryHasChanged(countryLabel)
    const [selectedPathway, changeSelectedPathway] = useState(matchingOption)

useEffect(() => {
      if (hasCountryLabelChanged) {
        if(matchingOption) {
          changeSelectedPathway(matchingOption)
        } else {
          changeSelectedPathway(options[0])
        }
      } else {
       changeSelectedPathway(optionSelected)
      }

    },[matchingOption, optionSelected, selectedPathway, hasCountryLabelChanged])

    if(selectedPathway !== undefined) {
      const newLevers = levers.map((lever, index) => {
          lever.value = +pathways[selectedPathway.value][index].toFixed(1) * 10
          return lever
      })
      dispatch(Actions.updateAllLevers(newLevers))
    }

     return selectedPathway
  }
  
  const countryHasChanged = (countryLabel) => {
    const prevValue = UsePrevious(countryLabel)
    return prevValue !== countryLabel
  }
  
  const UsePrevious = (countryLabel) => {
    const ref = useRef()
    useEffect(() => {
      ref.current = countryLabel
    })
    return ref.current
  }

“selectedPathway”显示在< select value={DefaultValue} />

Answer 1

您的 optionValueCheck 调用应该发生在 useEffect 内，其中一个依赖项参数为 countryLabel。这样每当 countryLabel 更新时，您的函数就会被执行。

比之前的渲染 React 问题渲染了更多的钩子

1 个答案: