React Hook “React.useEffect” 在 function “selectmenu” 中调用，它既不是 React function 组件也不是自定义 React Hook ZC1C425268E68385D1AB5074F1477

Question

Problem: React Hook "React.useEffect" is called in function "selectmenu" which is neither a React function component or a custom React Hook function.

Target: I want to Mount Component('component DidMount/WillUnmount) (using useEffect()) only when I click on a button, rather than, mounting while the file (or whole Component) is being loaded.

Actual Goal: I want to select(or highlight) a file (custom ) on click. But when the user clicks outside the dimensions of the file (), then the selected file should get deselected (remove highlight).

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

Note:

1. I've tried with the UPPER case of SelectFolder #56462812 . Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
2. I want to try something like this . But with a click of a button (useEffect() should invoke onClick event).

Answer 1

I think I got what you're trying to accomplish. First, you can't define a hook inside a function. What you can do is trigger the effect callback after at least one of its dependencies change.

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

Though for this particular problem (from what I understood from your description), I'd go something like this:

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