Javascript “反应钩”；反应。使用效果“；在函数“中调用”；选择Menu"；它既不是React函数组件，也不是自定义React钩子函数

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

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

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

导出默认函数（）{
让[ismenuselected，setmenuselection]=useState（0）
常量选择菜单=（）=>{
console.log（“要选择的菜单”）
React.useffect（（）=>{
log（'Component DidMount/WillUnmount'）
return（）=>{
console.log（'Component Unmounted'）
}
}，[isfolderselected]）；
}
返回(
)
}

注:

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

我想试试这样的东西。但只需单击一个按钮（useffect（）应调用onClick事件）

---

我想我得到了你想要达到的目标。首先，不能在函数中定义钩子。您可以做的是在至少一个依赖项发生更改后触发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>
  ))
}

导出默认函数（）{
让[currentOption，setCurrentOption]=useState（）
功能手柄选择选项（i）{
return（）=>setCurrentOption（i）
}
函数clearSelectedOption（）{
返回setCurrentOption（）
}
return（options.map）（（option，i）=>
))
}

您不能在回调中设置钩子。这在react文档中的官方钩子规则faq中有介绍。您需要切换某些状态，然后在名为effect hook的无条件条件条件中检查该状态。谢谢@JaredSmith。我通过使用

类组件

和

compountendimount

来实现它，谢谢@nicodp，这在一定程度上确实有帮助。

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