如何阻止React.useEffect的副作用?

Question

一旦我继续在我的 Web 应用程序中路由/login，它就会触发一个不应该useEffect，因为当时没有更改任何状态，请查看我的代码并告诉我我错在哪里

function Login(){
const history = useHistory();
var [email, setEmail] = React.useState("");
var [password, setPassword] = React.useState("");
var [isLoggedIn, setLogin] = React.useState(false);
var [allTodosList, setList] = React.useState([]);
React.useEffect(()=>{
console.log("triggered")
}, [isLoggedIn])
const sendLogin = async(event) => {
try {
var data = {
Email : email,
Password: password,
}
const response = await axios.post("/api/login", data);
if (response.data.verified === true){
const todoList = response.data.todos;
setLogin(true);
}
else{
alert("Invalid credentials please try again");
}
}
catch(err){
console.log("there is an error while sending login data via post");
console.log(err);
}
}
return(
<div className = "login-form">
<form>
<input  
type="text" className = "emailbox"
placeholder = "Email" value = {email}
onChange = {(event) => setEmail(event.target.value)}/>
<input type="password" className = "passwordbox"
name="password" id="password" 
placeholder= "password" value = {password}
onChange = {(event) => setPassword(event.target.value)}/>
<span className = "login-button"><Button variant = "cantained"color = "secondary"
onClick = {sendLogin}> Login</Button></span>
</form>
</div>
)
}
export default Login;

当我继续使用反应路由进入此组件时，useEffect 以某种方式被触发，并且控制台日志被触发。 请告诉我除非状态更改，否则如何阻止此useEffect触发???

Answer 1

它在加载时和状态更改时触发。您应该有条件地检查状态。

React.useEffect(()=>{
console.log("triggered")
if (isLoggedIn) {
console.log('isLoggedIn is true')
}    
//else, just don't do anything.
}, [isLoggedIn])

如果你熟悉 React 类生命周期方法，你可以认为 useEffect Hook as componentDidMount， componentDidUpdate， and 组件将卸载组合。 https://reactjs.org/docs/hooks-effect.html

这就解释了为什么在挂载、更新组件(基于依赖项或空数组 - 仅调用一次)和卸载(清理)时调用 useEffect。

Answer 2

请看这个例子。 https://stackblitz.com/edit/react-eelqp2

我创建了一个钩子useMountedRef并检查mountedRef是否为真以避免副作用。

我之所以使用setTimeout是为了进行合理的延迟，以便我们可以确保在所有初始使用效果之后将 ref 值设置为 true。