Javascript 表单提交时页面被重新加载。为什么？

我已经使用react钩子实现了一个受控表单。 我还向表单提交处理程序添加了event.preventDefault（）调用。 但是由于某些原因，表单提交总是会导致页面刷新，即使在那时也是如此。 我不知道为什么

我已经检查了StackOverflow中的其他线程并检查了答案，我所做的是正确的。 我就是不能

下面是我的代码。。 我做错了什么

import React，{useState}来自“React”；
从“./style.css”导入样式
从“react router dom”导入{Link，useParams}
从“react redux”导入{useDispatch，useSelector}
从“./../data/builder”导入{builderUpdateRequest，选择builders}
constpagebuilderform=（）=>{
设{id}=useParams（）；
const allBuilders=use选择器（selectBuilders）
const selectedBuilder=allBuilders？allBuilders.find（x=>x.id==id）：null；
常量[formData，setFormData]=使用状态（selectedBuilder）
const dispatch=usedpatch（）；
const onSubmitHandler=（e）=>{
e、 预防默认值（）；
调度（builderUpdateRequest（formData））；
}
常数handleChange=（e）=>{
const newFormData={…formData}；
newFormData[e.currentTarget.name]=e.currentTarget.value；
setFormData({
…新表单数据，
})
}
如果（selectedBuilder）{
返回(
开发人员徽标图像URL
开发商名称
多年的经验
项目数
描述
项目名称
项目地点
项目图像URL
回家吧
)
}
否则{
回家
}
}
导出默认页面builderform在调试了一些之后，我发现重新加载是由于webpack热重新加载功能造成的。一旦我在webpack dev server中禁用了热重新加载，我的页面在表单提交时停止刷新。
这在dev服务器上发生的原因非常奇怪和令人惊讶。我现在很好奇，为什么dev服务器在一个api调用之后执行热重载来更新表单中输入的数据

我在webpackDevServer.config.js中修改了这些设置


watchContentBase:false，
//启用热重新加载服务器。它将提供WDS\U套接字\U路径端点
//用于WebpackDevServer客户端，以便它可以了解文件何时被删除
//更新。WebpackDevServer客户端包含为入口点
//在网页包开发配置中。请注意，只有
//当前已热加载到CSS。JS更改将刷新浏览器。
hot:false，
当我使用onSubmit作为防止其像以下那样工作：

const Submit = (e) => {
    e.preventDefault();
    alert("Information Is Received");
  };

  return (
    <>
      <form onSubmit={Submit}>
        <div className="Dcontainer">
          <h1 className="heading">Hello, {inputValue.uName}</h1>
          <p>{inputValue.email}</p>
          <p>{inputValue.password}</p>
          <input
            type="text"
            placeholder="Enter Your Name"
            name="uName"
            // value ={inputValue.uName}
            onChange={inputEvent}
          />
          <input
            type="email"
            placeholder="Enter Your Email"
            name="email"
            // value={inputValue.email}
            onChange={inputEvent}
          />
          <input
            type="password"
            placeholder="Enter Your Password"
            name="password"
            // value={inputValue.password}
            onChange={inputEvent}
          />
          <button className="primary__btn" type="submit">
            Submit
          </button>
        </div>
      </form>
    </>
  );
};

const Submit=（e）=>{
e、 预防默认值（）；
警报（“收到信息”）；
};
返回(
您好，{inputValue.uName}
{inputValue.email}

{inputValue.password}

提交
);
};
你能创建一个可复制的问题吗？你能分享一下从“./../data/builder”do？@PrateekThapa导入{builderUpdateRequest，SelectBuilder}的内容吗？我不明白你的意思。你是说页面重新加载问题是可复制的吗？是的，是的。@MohammadFaisal他们只是redux操作的创建者和选择器。如果应用程序组件被重新呈现，则会发生页面刷新。因此，请检查您的操作是否导致应用程序组件重新呈现。您解决了此问题吗？webpackDevServer.config.js位于何处？我在用react