使用 React 钩子更改页面(重置自身)

Question

我正在尝试控制在使用 Hooks 充当长形式的函数中显示的问题。我正在使用使用和设置状态。前两个页面工作没有问题，但是在第三次单击时，第三页最终在屏幕上闪烁了一秒钟，程序返回到0。我不明白是什么原因造成的。

import React, { useState } from 'react';
import './Form.css';
function Form() {
const [page, setPage] = useState(0);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState('');
if (page === 0 ){
return (
<div>
<p>{page}</p>
<h1> Hello, I am Adiona.</h1>
<p>You clicked {page} times</p>
<button onClick={() => setPage(page + 1)}>
Click me
</button>
</div>
);
};
if (page === 1 ){
return (
<div>
<p>{page}</p>
<h1 >Welcome to Adiona. Fill out this section to create your account.</h1>
<form class = 'Initial'>
<input id = 'First Name' placeHolder='First Name' type = 'text' onChange={(e)=>setFirstName(e)}/>
<input id = 'Last Name' placeHolder='Last Name' type = 'text' onChange={(e)=>setLastName(e)}/>
<input id = 'Email' placeHolder='Email' type = 'text' onChange={(e)=>setEmail(e)}/>
<input id = 'Password' placeHolder='Password' type = 'text' onChange={(e)=>setPassword(e)}/>
<button value = 'Back' onClick={() => setPage(prevPage => prevPage - 1)}>
Back
</button>
<p>You clicked {page} times</p>
<button onClick={() => setPage(page + 1)}>
Click me
</button>
</form>
</div>
);
};
if (page === 2) {
return(
<div>
<h1> hello </h1>
</div>
);
};
};
export default Form

Answer 1

发生这种情况是因为您的page===2显示一个表单，当您单击button元素时，表单将提交(它们默认为提交按钮(。

将type="button"添加到button元素中，它应该得到修复。

<button
value="Back"
onClick={() => setPage(prevPage => prevPage - 1)}
type="button"
>
Back
</button>
<p>You clicked {page} times</p>
<button onClick={() => setPage(page + 1)} type="button">
Click me
</button>

Answer 2

编辑：不要忘记将按钮类型设置为type="button"，否则，类型将等于"提交"。这就是您的网站重新加载的原因。

---

旁注：

根据以前的值更改状态时，请始终使用功能更新，否则您将依赖于意外行为(争用条件、计时等(：

<button onClick={() => setPage(p => p + 1)} type="button">
Click me
</button>

上面的代码将确保页面始终根据最新值递增。如果您想了解更多有关它的信息，请查看文档。