React Hook "React.useEffect" вызывается в функции "selectmenu", которая не является ни компонентом функции React, ни пользовательской функцией React Hook.

Question

Проблема: React Hook «React.useEffect» вызывается в функции «selectmenu», которая не является ни компонентом функции React, ни пользовательской функцией React Hook.

Цель: я хочу смонтировать компонент ('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).

Answer 1

Думаю, я получил то, что вы пытаетесь достичь sh. Во-первых, вы не можете определить ловушку внутри функции. Что вы можете сделать, так это запустить обратный вызов эффекта после изменения хотя бы одной из его зависимостей.

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

Хотя для этой конкретной проблемы (из того, что я понял из вашего описания), я бы go что-то вроде это:

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