当我在useEffect中声明function时，它没有在html中声明

Question

我正在实现改变state取决于它是悬停与否。但是如果我让它像下面的第一个代码，Too many re-renders.错误将发生。为了解决这个问题，我只在state改变时才使用useEffect来渲染，但是出现了一个叫做onHover is not defined的错误，即在用户效果中声明的函数没有声明。

不使用useEffect

import "./styles.css";
import { useState } from "react";
export default function App() {
const [isHover, setIsHover] = useState(false);
return (
<button onMouseEnter={setIsHover(true)} onMouseLeave={setIsHover(false)}>
click
</button>
);
}

使用useEffect

import "./styles.css";
import { useEffect, useState } from "react";
export default function App() {
const [isHover, setIsHover] = useState(false);
useEffect(()=>{
const onHover = () => {
setIsHover(true)
}
},[isHover])
return (
<button onMouseEnter={onHover()} onMouseLeave={setIsHover(false)}>
click
</button>
);
}

我应该怎么做才能使用在useEffect中声明的函数?

Answer 1

因为你只是想setState，所以不需要使用useEffect。您可以使用不使用useEffect，如下所示。

import "./styles.css";
import { useState } from "react";
export default function App() {
const [isHover, setIsHover] = useState(false);
return (
<button onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
click
</button>
);
}

Answer 2

这与作用域有关。onHover函数是在useEffect钩子中定义的，所以一旦你离开了钩子的块，它就会离开作用域。你必须直接在组件中定义它，在任何其他块作用域之外，并且在useEffect中简单地调用它。

它仍然会导致多次调用onHover，直到鼠标离开所讨论的元素。为了防止这种情况，您可以添加如下条件:

const onHover = () => {
if (!isHover) {
setIsHover(true);
}
}