React表单提交后页面自动刷新，e.preventDefault()无效求助

问题原因与解决办法 #

1. 页面刷新的核心原因：navigate(0) #

你提交成功后执行的navigate(0)是强制刷新当前页面的指令，这才是页面刷新的根本原因，和e.preventDefault()无关。直接删掉这一行即可，提交后通过navigate(/country/${countryId})已经能跳转到目标页面，不需要额外刷新。

2. e.preventDefault()无效的原因 #

你的表单没有用原生<form>标签包裹，而是用了Material-UI的FormControl组件。e.preventDefault()的作用是阻止原生表单的默认提交跳转行为，但你现在是通过按钮onClick触发提交，不存在原生表单的默认行为，所以这个方法在这里本来就起不到作用。

如果想让表单逻辑更规范，可以改成用<form>标签包裹内容，把onSubmit绑定到表单的onSubmit事件上：

return (
  <>
    <Paper elevation={6} sx={{ paddingX: 4, paddingY: 3 }}>
      <form onSubmit={onSubmit}>
        <FormControl fullWidth sx={{ rowGap: 2 }} size="medium">
          {/* 原有表单输入组件保持不变 */}
          <Button variant="contained" color="primary" type="submit">
            Submit
          </Button>
        </FormControl>
      </form>
    </Paper>
  </> 
);

修改后e.preventDefault()就能正常阻止原生表单的默认跳转行为，按钮点击会触发表单提交事件。

3. 额外优化建议 #

• revValues里的user字段后端并未使用（后端直接取req.user.username），可以删除这个冗余字段。
• 错误处理可以合并catch逻辑，同时把错误信息展示给用户：

async function onSubmit(e) {
  e?.preventDefault();
  try {
    await ReviewsService.create(countryId, revValues);
    navigate(`/country/${countryId}`, {
      state: { type: 'success', message: 'Review has been created.' },
    });
  } catch (error) {
    const errorMsg = error.response?.data.message || '提交失败，请稍后重试';
    console.log(errorMsg);
    setError(errorMsg);
  }
};

Stack Overflow提问礼仪建议 #

• 精准描述问题：明确说清现象、预期结果、已尝试的操作，比如直接说「表单提交后页面自动刷新，用了e.preventDefault()但没用」，不要模糊表述。
• 精简贴代码：只贴和问题相关的代码片段，比如只贴onSubmit函数和表单结构，无关的样式、评分逻辑可以省略，除非确定它们和问题有关。
• 说明环境信息：标注React、Material-UI、Axios的版本，版本差异可能导致问题。
• 附上错误信息：如果控制台有报错，一定要贴出来，哪怕你觉得不重要。
• 写清晰标题：比如用「React表单提交后页面强制刷新，e.preventDefault()无效」，避免宽泛标题。
• 及时跟进反馈：有人回复后，要说明问题是否解决，或者补充更多细节。

内容的提问来源于stack exchange，提问作者Ventrity Customer Service