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

Question

问题：React Hook"React.useEffect"；在函数"中被调用；选择菜单"；它既不是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#556462812的UPPER案例。Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
2. 我想试试这样的东西。但是单击一个按钮(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>
))
}