React Hook "React.useEffect" 在函数 "selectmenu" 中被调用，它既不是 React 函数组件也不是自定义 React Hook 函数

Question

问题：React Hook "React.useEffect" 在函数 "selectmenu" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数。

目标：我只想在单击按钮时安装 Component('component DidMount/WillUnmount) （使用 useEffect()），而不是在加载文件（或整个组件）时安装。

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

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。 Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
2. 我想试试this 之类的东西。但是点击一个按钮（useEffect() 应该调用 onClick 事件）。

Answer 1

我想我得到了你想要完成的任务。首先，您不能在函数内定义挂钩。您可以做的是在至少一个依赖项发生变化后触发效果回调。

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