javascript - 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. 我想尝试这样的事情。但是单击一个按钮（useEffect() 应该调用 onClick 事件）。

标签： javascriptreactjsreact-nativereact-hooksonclicklistener

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