React调用Python API后页面自动重载，添加e.preventDefault无效求助

问题详情 #

点击按钮触发Python后端API调用后，React应用自动刷新页面，已经尝试在事件处理函数中添加e.preventDefault()，但问题依旧。

涉及代码 #

后端Flask（app.py）返回逻辑 #

return jsonify({"file_path": file_path})

前端React的两种API调用实现 #

Axios 版本

const response = await axios.post('http://127.0.0.1:5000/upload_images', {
    images: imageFilesArray
});

console.log('Upload successful:', response.data);

Fetch 版本

fetch("http://127.0.0.1:5000/rewrite_json", requestOptions)
.then((response) => response.text())
.then((result) => console.log(result))
.catch((error) => console.error(error));

排查与解决步骤 #

• 检查按钮的表单上下文：如果按钮嵌套在<form>标签里，默认type="submit"会触发表单提交，直接导致页面刷新。哪怕加了e.preventDefault()，也可能因为事件绑定错误没生效。最简单的办法是给按钮加上type="button"，或者把外层<form>换成普通<div>。
• 确认事件绑定方式：别把onClick写成onClick={handleClick()}，这种写法会在组件渲染时就执行函数，而不是点击时触发。正确写法是onClick={handleClick}。
• 排查preventDefault是否真的执行：在事件处理函数开头加console.log('triggered')，确认函数被调用，同时检查e是否为有效事件对象——比如如果是用箭头函数传递参数，要确保正确传递事件对象，比如onClick={(e) => handleClick(e, param)}。
• 排除全局状态更新导致的重渲染：如果API调用后更新了全局状态（比如Redux、Context），可能是状态变化触发了组件树的重渲染，看起来像页面重载。用React DevTools查看哪些组件在不必要地重渲染，优化状态更新逻辑。
• 检查请求本身的异常：打开浏览器Network面板，查看API请求的状态码和响应内容。如果后端返回了非2xx状态码，或者存在跨域问题，某些浏览器可能会触发异常行为。确保后端配置了CORS（比如Flask用flask-cors）。

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