为什么我的使用效果导航不起作用？

Question

我正在制作一个注册表格，但我的使用效果不起作用。没有错误，我的导师说这应该有效。我们有点被这个bug卡住了。请帮忙。其他一切都有效，包括拒绝事件。获取数据有效。它显示为JSON数据。

const SignupPage = () => {
const navigate = useNavigate();
function errormessage(){
return 'something went wrong'
}
//---------------------------------------------
const errorDiv = useRef('')
const [error,errorUpdate] = useState(null)
//-------------------------------------------------
async function FormSubmit(){
const emailInput = document.getElementById('email')
const passwordInput = document.getElementById('password')
const email = emailInput.value
const password = passwordInput.value
const button = document.getElementById('button')


try{

button.addEventListener('click',(event)=>{
event.preventDefault()
})

const Options = {
method: 'POST',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify({email:email,password:password})
}

const fetchUserCreate = await fetch('http://localhost:5000/Signup',Options)

const jsonData = await fetchUserCreate.json()
jsonData.catch(error=>{
return PromiseRejectionEvent
})
useEffect(()=>{
if(jsonData.ok){
return navigate('/')
}
},[jsonData])
//console.log(jsonData)
} catch (error) {
errormessage()
errorUpdate(errormessage())


}

}

return ( 
<div className="container">
<div className="black"></div>
<video src={SnowVid} type="video/mp4" autoPlay muted loop id='video1'></video>
<div id="login-container">
<h2 className="title-galixy">I0I</h2>
<div id="Signup">
<b><h2 className="title-card">Signup</h2></b>
{/* ---------------------------- */}
<i><h3 className="email">Email</h3></i>
<div className="input"><input name='email' id='email' type="text" className="inputs" /></div>

<i><h3 className="Password">Password</h3></i>
<div className="input"><input name='Password' id='password' type="text" className="inputs" /></div>
<div className="error" ref={errorDiv} >{error}</div>
<div className="button"><button onClick={()=>{FormSubmit()}} className='LastButton' id='button'><b>Login</b></button></div>

</div>
</div>
</div>
);
}

k

useEffect(()=>{
if(jsonData.ok){
return navigate('/')
}
},[jsonData])

如果jsonData不是错误，我希望它导航到/。这是我的注册页面。

Answer 1

您的代码存在一些问题：

1. useEffect被认为在FormSubmit函数的范围之外。它应该在组件的渲染阶段的范围内。(就在FormSubmit函数声明之前)
2. 您应该从FormSubmit正在获取的事件中调用preventDefault函数
3. 不是从全局文档中获取输入值，而是通过从表单事件中提取值来获取这些值。您可以使用<form onSubmit={(event) => FormSubmit(event)} />，或与<button type="submit" onClick={(event) => FormSubmit(event)}/>获得它

旁注：

• 我会删除jsonData.catch；您已经在捕获阶段中捕获了错误。

• 如果要在获取数据时导航到'/'，则可以在获取所需数据时立即调用navigate('/')。

• 另一种选择是在该函数的作用域之外使用useEffect，将其提升到包装器组件的作用域。(注册页面)请注意，如果您决定提升useEffect，则必须使用另一种状态来正确触发useEffect。

const navigate = useNavigate();
const [error, errorUpdate] = useState("");
const [shouldNavigate, setShouldNavigate] = useState(false);
useEffect(() => {
if (shouldNavigate) {
navigate("/");
}
}, [shouldNavigate]);
async function FormSubmit() {
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const email = emailInput.value;
const password = passwordInput.value;
try {
const options = {
method: "POST",
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
},
body: JSON.stringify({ email: email, password: password }),
};
const fetchUserCreate = await fetch(
"http://localhost:5000/Signup",
options
);
const jsonData = await fetchUserCreate.json();
if (jsonData.ok) {
setShouldNavigate((prev) => !prev);
}
} catch (error) {
errorUpdate(error?.message);
}
}