React+Node.js表单提交后页面刷新跳转至首页问题求助

我用React+Node.js开发项目，Node.js负责连接并更新JSON文件。app.js里通过useState管理页面视图，默认显示home页，点击Admin按钮可切换到Admin页面。在Admin页面填写表单提交后，后端能正常更新JSON文件，但页面会完全刷新并跳回home视图，之前的控制台日志全部消失，只显示app.js初始化的日志。如果断开和server.js的连接，仅用useState更新Admin页面表格就不会有这个问题，但JSON文件没法更新。我已经在表单的onSubmit里加了e.preventDefault()阻止默认提交，在Chrome、Firefox、Opera里测试问题依然存在，怀疑和后端请求函数有关，求解决建议。

• 检查handleSubmit中的POST请求实现：确认是否使用了fetch/axios等工具，但没正确处理异步逻辑，或者不小心触发了页面跳转（比如误用window.location，或者请求配置里的redirect参数设置错误）。
• 验证e.preventDefault()是否生效：在表单onSubmit事件里先打印console.log(e.defaultPrevented)，如果输出false，说明事件可能被其他组件/逻辑拦截，导致默认提交行为没被阻止。
• 监控视图状态变化：在setCurrentView的调用处添加日志，看是否有其他逻辑意外把currentView改回了home，比如Admin组件是否被意外卸载、父组件的状态是否被错误修改。
• 完善错误处理：给handleSubmit的try块补上catch分支，未捕获的请求错误可能触发页面异常刷新，同时可以在请求完成后添加日志，确认请求的执行流程。
• 检查表单属性：确认表单没有隐式的action属性（可能由第三方组件或遗留代码添加），这会覆盖preventDefault的效果。

视图状态管理 #

const [currentView, setCurrentView] = useState('home'); // 默认视图

切换到Admin页面的按钮 #

<button onClick={() => 
  setCurrentView('admin')} className="big-btn" aria-label="Go to Admin Section">Admin</button>

Admin视图结构 #

{/* Admin视图 */}
<div className={`mainViewContainer ${currentView === 'admin' ? 'active' : ''}`}>
  <div id="adminViewContainer">
    <Admin backButton={
      <button 
        onClick={() => setCurrentView('home')} 
        className="mainBackBtn" 
        aria-label="Go back to Home">← Back
      </button>
    }/>
  </div>  
</div>

Admin页面表单代码 #

<form id="adminFormContainer" onSubmit={(e) => {
  e.preventDefault();  // Prevent page refresh
  handleSubmit();      // Call your handleSubmit function
}}>
  <div id="adminNameClubContainer">
    <div id="adminNameAvailabilityContainer">
      <input 
        type="text" 
        value={firstName} 
        onChange={(e) => setFirstName(e.target.value)} 
        placeholder="First Name" 
      />
      <input 
        type="text" 
        value={lastName} 
        onChange={(e) => setLastName(e.target.value)} 
        placeholder="Last Name" 
      />
    </div>
  </div>

  <div id="addNewPlayerBtnContainer">
    <button type="button" className="resetPlayerBtn" onClick={resetFields}>Reset</button>
    <button type="submit" id="adminSubmitBtn">Accept</button> 
    {/* Submit button */}
  </div>
</form>

handleSubmit函数片段 #

const handleSubmit = () => {
  try {
    console.log('\nStarting the process to add or update a player...');
    // 此处为发送POST请求到后端的代码
  } catch (error) {
    console.error('提交处理出错:', error);
  }
}

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