未捕获错误:无效钩子调用.钩子只能在函数组件的内部调用.addToast钩

Question

从按钮内的onClick调用handleSubmit函数后，错误说我不允许在函数组件外使用useToasts钩子。不理解onClick是否脱离了组件的上下文。请帮我一下。

import styles from "../styles/signup.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faXmark } from "@fortawesome/free-solid-svg-icons";
import signinStyles from "../styles/Signin.module.css";
import { useState, useEffect } from "react";
import validator from 'validator';
import {useToasts} from 'react-toast-notifications';
function SignUp(props) {
const [goNext, setGoNext]= useState(false);
const [name, setName]= useState('');
const [email, setEmail]= useState('');
const [isEmailValid, setIsEmailValid]= useState(true);
const [isNameValid, setIsNameValid]= useState(true);
const [isNameBlank, setIsNameBlank]= useState(true);
const [isEmailBlank, setIsEmailBlank]= useState(true);
const {addToast}= useToasts();
async function handleName(name){
setName(name);
if(name.length >=3 && /^[A-Za-z]*$/.test(name)){
setIsNameValid(true);
setIsNameBlank(false)
}else{
setIsNameValid(false);
setIsNameBlank(false)
}
if(name.length===0)
setIsNameBlank(true);
if(isEmailValid && isNameValid && !isNameBlank && !isEmailBlank){
setGoNext(true);
}else{
setGoNext(false);
}
}
function handleEmail(email){
// console.log('email in handler: ',email);
setEmail(email);
if(validator.isEmail(email)){
setIsEmailValid(true);
setIsEmailBlank(false);
}else{
setIsEmailValid(false);
setIsEmailBlank(false);
}
if(email.length===0)
setIsEmailBlank(true);
if(isEmailValid && isNameValid && !isNameBlank && !isEmailBlank){
setGoNext(true);
}else{
setGoNext(false);
}
} 
const handleSubmit=async(e)=>{
console.log("Form submit event", e);
e.preventDefault();
const url= 'http://localhost:8000/sendVerificationMail';
const dataToSubmit={
name: name,
email: email
}
const response= await fetch(url, {
method: 'POST',
headers: {
"Content-type": "application/json",
},
body: JSON.stringify(dataToSubmit)
})
console.log('response :', response)
if(response.status== 200){
props.onNextClick();
}
if(response.status== 409){
addToast('Email already exist!', {appearance: 'error'});
}
}
useEffect(() => {
handleName(name);
handleEmail(email);   
}, [name, email, isEmailValid, isNameValid,goNext,isEmailBlank, isNameBlank])

return (
<>
<div className={styles.signUpContainer}></div>
<div className={styles.signUpBox}>
<button
className={styles.signupCloseButton}
onClick={props.onSignUpClose}
>
<FontAwesomeIcon icon={faXmark} size="lg" />
</button>
<div className={styles.signUpInfo} >
<h3
style={{ fontSize: "18px", fontWeight: "1000", lineHeight: "25px" }}
>
Sign up
</h3>
<form action='' method="post"  style={{width: '100%'}}>
<div className={signinStyles.formInputDiv} style={{width: '90%'}}>
<label>
<h5 className={signinStyles.formLabel}>Name</h5>
</label>
<input
type="text" name="name"
placeholder="What would you like to be called?"
className={(!isNameValid && !isNameBlank)? styles.invalidInputError :signinStyles.formInput}
style={{width: '100%'}}
onChange={(e)=> handleName(e.target.value)}
></input>
{(!isNameValid && !isNameBlank)? <div className={styles.invalidInputBox}>
Minimum name length should be 3.
</div> :null}
</div>
<div className={signinStyles.formInputDiv} style={{width: '90%'}}>
<label>
<h5 className={signinStyles.formLabel}>Email</h5>
</label>
<input
type="email" name="email"
placeholder="Your email"
className={(!isEmailValid && !isEmailBlank)?  styles.invalidInputError: signinStyles.formInput}
style={{width: '100%'}}
onChange={(e)=> handleEmail(e.target.value)}
></input>
{(!isEmailValid && !isEmailBlank)? <div className={styles.invalidInputBox}>
The email address you entered is not valid.
</div> :null}
</div>
<div style={{ width: '100%', borderBottom: '1px solid lightGray', marginTop: '35px'}}>
</div>
<button  type="submit" className={signinStyles.formLoginButton} disabled={!goNext}
style={{width: '15%', marginTop: '10px', position: 'relative', left: '40%'}}
onClick={handleSubmit}
>
Next
</button>
</form>
</div>
</div>
</>
);
}
export default SignUp;

addToast()应该工作，如果它在handleSubmit方法内调用，但不理解问题

Answer 1

useEffect(() => {
handleName(name);
handleEmail(email);   
}, [name, email, isEmailValid, isNameValid,goNext,isEmailBlank, isNameBlank])

请注释useEffect然后检查，您正在设置名称和电子邮件与名称和电子邮件的依赖关系，这将导致infinity循环。

只是评论和测试，也许这个问题与吐司无关。