javascript - ReactJS Fetch POST 导致不需要的刷新
问题描述
我创建了一个反应应用程序,它以表格形式获取图片文件和其他一些输入,并通过获取“post”将它们发送到 API。一切正常,api 完成它的工作并返回正确的响应,这显示在警报函数中。但是,在获取完成后,页面会自动刷新。我想在获取后使用响应数据重定向到另一个页面,但由于这个问题它返回到表单页面。这是我的代码:
export default function Miyuki() {
const { register, handleSubmit } = useForm()
const onSubmit = async (data) => {
const formData = new FormData()
formData.append("picture", data.picture[0])
formData.append("row", data.row)
formData.append("column", data.column)
const res = await fetch(baseApiUrl + "miyuki/prev", {
method: "POST",
body: formData
}).then(res => res.json())
.then(res => {
alert(JSON.stringify(res))
})
}
return (
<React.Fragment>
<Toolbar></Toolbar>
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('picture', { required: true })} type="file" />
<input {...register('column', { required: true })} type="number" min="1" max="50" />
<input {...register('row', { required: true })} type="number" min="1" />
<button>Submit</button>
</form>
</React.Fragment>
);
}
我已经尝试过 event.preventDefault() 之类的东西。但问题与形式无关。它在获取帖子完成后刷新。有没有办法防止这种刷新,或者有没有办法让我可以重定向到另一个页面,获取来自获取的响应,而不会在转到目标页面后立即返回到该页面?
解决方案
没关系,解决了。问题不是由 fetch 或 form 引起的。事实证明,在 React 开发过程中,如果您在“public”文件夹中进行任何更改,页面将刷新。获得生产版本解决了这个问题。