反应过多重新渲染无限循环

Question

我不确定为什么会出现这个错误，我只是想制作一个悬停时反转颜色的按钮，如果你有解决方案或更好的方法，请告诉我

import React, {useState} from 'react'

function Login() {
const [bttnColor, setBttnColor] = useState('white')
const [textColor, setTextColor] = useState('black')
function colorChange1(){
setBttnColor('black')
setTextColor('white')
}
function colorChange2(){
setBttnColor('white')
setTextColor('black')
}
return (
<div className="Login" style={{display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center'}}>
<h1 style={{display:'flex',  marginTop:'400px', marginBottom:'40px'}}>Login</h1>
<input style={{height:'30px', width:'140px', marginBottom:'10px'}} placeholder='Username'/>
<input style={{height:'30px', width:'140px'}} type='password'placeholder='Password'/>
<button style={{height:'30px', width:'140px', marginTop:'10px', background:bttnColor, color:textColor}} onMouseEnter={colorChange1()} onMouseLeave={colorChange2()}>Login</button>:
</div>
)
}
export default Login

Answer 1

在声明属性时，｛｝内部的结果会发送到组件。

这将把colorChange1((的结果发送到组件，而不是函数本身

onMouseEnter={colorChange1()} 

在您的用例中，这是不需要的行为，但请记住，这是一个与任何其他属性一样的属性，如style或className。

您需要向它传递一个函数引用，而不是函数的结果。你可以用两种不同的方式：

onMouseEnter={colorChange1}
onMouseEnter={(event) => colorChange1(event, otherVariables...)}

第一种方法是对现有函数进行函数引用。当您不需要将任何其他信息传递给功能时，请使用此选项

第二种方法是用lambda包装函数调用。这将允许您从当前作用域中获取变量，并在方法运行时将它们传递到方法中。

编辑：

仔细想想，这样做会使它变得比需要的复杂得多。这可以在CSS的几行中完成。

让我们删除那些颜色更改方法以及onMouseEnter和onMouseLeave调用，并为按钮指定className，以便在CSS中引用它。

<button className="login-button">Login</button>:

然后，让我们在与Login.js:相同的文件夹中创建以下名为Login.css的css文件

.login-button {
height: 30px;
width: 140px;
marginTop: 10px;
background:white;
color:black;
}
.login-button:hover {
background: black;
color: white;
}

最后，让我们导入css文件：

import "./Login.css";