React钩子“React.useffect”在函数“selectmenu”中调用，该函数既不是React函数组件，也不是自定义React钩子函数

Question

问题：在函数“selectmenu”中调用了React钩子“React.useEffect”，该函数既不是React函数组件，也不是自定义React钩子函数

目标：我只想在单击按钮时挂载组件（'Component DidMount/WillUnmount）（使用useffect（）），而不是在加载文件（或整个组件）时挂载

实际目标：我想在单击时选择（或突出显示）一个文件（自定义）。但是，当用户在文件（）的维度之外单击时，所选文件应被取消选择（删除突出显示）。

export default function Academics() {
  let [ ismenuselected, setmenuselection] = useState(0)

  const selectmenu = () => {

    console.log("Menu to Select")

    React.useEffect(() => {
      console.log('Component DidMount/WillUnmount')

      return () => {
         console.log('Component Unmounted')
      }
    }, [isfolderselected]);
  }

  return (
          <div onClick={selectmenu}></div>
  )
}

注:

1. 我试过使用SelectFolder的大写字母#56462812<代码>错误：钩子调用无效。钩子只能在函数组件的主体内部调用

Answer 1

我想我得到了你想要达到的目标。首先，不能在函数中定义钩子。您可以做的是在至少一个依赖项发生更改后触发effect回调。

useEffect(() => {
  // run code whenever deps change
}, [deps])

虽然对于这个特殊的问题（从您的描述中我了解到），我会这样做：

export default function Academics() {
  let [currentOption, setCurrentOption] = useState()

  function handleSelectOption(i) {
    return () => setCurrentOption(i)
  }

  function clearSelectedOption() {
    return setCurrentOption()
  }

  return (options.map((option, i) =>
    <button
      onClick={handleSelectOption(i)}
      className={i === currentOption ? 'option option--highlight' : 'option'}
      onBlur={clearSelectedOption}
    ></button>
  ))
}