Next/React中使用e.preventDefault()后点击按钮仍页面刷新问题

核心问题：按钮type属性无效 #

你的按钮使用了type="text"，这不是HTML按钮的合法type值（按钮合法type仅为submit、reset、button）。浏览器会将无效的type默认解析为submit类型——如果这个按钮包裹在<form>标签内，点击时会自动触发表单的默认提交行为，导致页面刷新。

你注释掉Firestore代码后页面不刷新的原因是：此时代码同步执行完成，e.preventDefault()能及时阻止按钮的默认行为；但当存在异步的Firestore写入操作时，浏览器事件处理的时序差异，导致表单提交的默认行为未被完全阻止。

解决步骤 #

1. 修正按钮type：将按钮的type="text"改为type="button"，明确告知浏览器这是普通按钮，不会触发表单提交：

<button type="button" className="btn" onClick={addDatetoDataBase}>add the current date</button>

2. 额外检查：按钮是否在form内
   如果按钮确实包裹在<form>标签中，除了修正type，也可以在form的onSubmit事件中直接阻止默认行为：

<form onSubmit={(e) => e.preventDefault()}>
  <button type="button" className="btn" onClick={addDatetoDataBase}>add the current date</button>
</form>

其他排查点 #

• 确认uuidv4()已正确导入：如果该函数未定义，生成id时会抛出错误，虽然你用catch捕获了Firestore的错误，但uuidv4()的错误会直接跳出函数，导致数据写入失败。
• 确认selectedDataFormatted已正确赋值：如果该变量未定义，Firestore写入时会存储undefined，影响数据正确性。

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