我对一个使用`useState`来管理表单是否已经提交的在线教程感到有点困惑。在react中这样做正常吗？
一个基本的在线react教程演示了如何创建一个基于react的表单，其中包含3个字段(名字、姓氏和电子邮件)。令我惊讶的是，它有useState来管理表单是否已经提交，用来决定是否显示成功消息。请注意，它不会进行实际的表单提交(即没有API调用)，因此我想知道它在这里是否仅将state用于模拟目的。
这是一段代码片段。
const [submitted, setSubmitted] = useState(false);
...
{submitted && !values.lastName && <span id='last-name-error'>Please enter a last name</span>}
...
{showSuccess && <div class='success-message'>Success! Thank you for registering</div>}
...对于useState的真实react应用程序来说，管理是否提交了诸如“联系我们”或“反馈”之类的简单表单是正常的吗？我的猜测是，通常情况下没有必要这样做...作为结果API调用，‘成功’或‘失败’可以简单地用来显示错误消息的状态。此后，理想情况下，表单应该重新设置为允许另一次提交...因此，不需要存储已提交表单的状态。我的理解是正确的吗？
回答 1
Stack Overflow用户
发布于 2020-09-08 19:36:06
你的问题有点令人困惑。基本上，如果你想在React中存储数据，并且这些数据对你的应用程序有直接的影响，你通常应该将它保存在状态中。提交表单时，将调用表单onSubmit事件处理程序，您可以在该事件处理程序中执行任何操作。很明显，在tutorial submitted状态中有一个用于模拟抓取过程的标志。通常，当你想要处理提交表单和获取API时，你应该在状态中存储两个项目：
错误和加载
在拉取API时，需要使用加载标志来显示加载指示器，并使用error来检查是否存在错误，存储并显示。如果API获取成功，您可以将用户重定向到另一个页面，显示通知或更改状态中的某些数据。由你决定。但请确保教程中的submitted状态只是一个示例和模拟。但它在现实世界中有真正的用处！希望它能帮上忙！
下面是一个例子:我想通过获取api来添加用户，如果api获取成功，我希望将其添加到列表中：
https://stackoverflow.com/questions/63792707
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号