ReactJS Fetch POST 导致不需要的刷新答案

【问题标题】：ReactJS Fetch POST Causes Unwanted RefreshReactJS Fetch POST 导致不需要的刷新
【发布时间】：2021-07-05 22:27:50
【问题描述】：

我创建了一个 React 应用程序，该应用程序在表单中获取图片文件和其他一些输入，并通过获取“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 的响应重定向到另一个页面，而不会在转到目标页面后立即返回到该页面？

【问题讨论】：

您好，我认为这是因为您没有在 onSubmit 函数中使用 e.preventDefault() 造成的。为了保留表单中的数据，您需要使用此方法。

标签： javascript reactjs post fetch

【解决方案1】：

没关系，解决了。问题不是由 fetch 或 form 引起的。事实证明，在 React 开发过程中，如果您在“public”文件夹中进行任何更改，页面将刷新。获得生产版本解决了这个问题。

【讨论】：