React中仅点击提交按钮时显示表单错误的实现问询

核心思路是通过状态变量控制错误信息的展示时机，而非输入过程中实时更新错误：

• 新增一个布尔类型的状态，用于标记表单是否已经被提交过（比如命名为isSubmitted，初始值为false）。
• 移除handleChange中调用setErrors的逻辑，输入阶段只更新用户输入数据userData，不触发验证。
• 在handleSubmit中，先调用validations函数获取当前输入的错误信息并更新errors状态，同时将提交标记状态设为true。
• 修改错误信息的渲染条件：只有当提交标记为true且对应字段存在错误时，才渲染错误提示（比如{isSubmitted && errors.email && <p>{errors.email}</p>}）。
• 可选优化：如果希望用户提交后修正输入时能实时看到错误更新，可以在handleChange中判断提交标记为true时，再调用验证逻辑更新errors。

内容的提问来源于stack exchange，提问作者Birkenz