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

Question

我已经使用反应钩子实现了一个受控的表单。 我还向表单提交处理程序添加了 event.preventDefault() 调用。 但是由于某种原因，表单提交总是会导致页面刷新。 我不知道为什么。

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

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

import React,{useState} from 'react';
import style from './style.css'
import {Link,useParams} from 'react-router-dom'
import {useDispatch,useSelector} from 'react-redux'
import {builderUpdateRequest,selectBuilders} from "../../data/builder"


const PageBuilderForm=()=>{
    let { id } = useParams();

    const allBuilders=useSelector(selectBuilders)
    const selectedBuilder=allBuilders?allBuilders.find(x=>x.id==id):null;
    const [formData,setFormData]=useState(selectedBuilder)
    const dispatch=useDispatch();

    const onSubmitHandler=(e)=>{ 
        e.preventDefault();
        dispatch(builderUpdateRequest(formData));
    }

    const handleChange=(e)=>{
        const newFormData={ ...formData};
        newFormData[e.currentTarget.name]=e.currentTarget.value;
        setFormData({
            ...newFormData,
        })
    }

    if(selectedBuilder){
        return(
        <div className={style.formContainer}>
            <form className={style.form} onSubmit={onSubmitHandler}>
                <div className={style.formLabel}>Developer Logo Image URL</div>
                <div className={style.formField}><input type="url" name="logo" value={formData.logo} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Developer Name</div>
                <div className={style.formField}><input type="text" name="title" value={formData.title} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Years of Experience</div>
                <div className={style.formField}><input type="number" name="totalExp" value={formData.totalExp} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Projects Count</div>
                <div className={style.formField}><input type="number" name="totalProjects" value={formData.totalProjects} onChange={handleChange} required/></div>


                <div className={style.formLabel}>Description</div>
                <div className={style.formField}><input type="text" name="desc" value={formData.desc} onChange={handleChange} required maxlength={200}/></div>


                <div className={style.formLabel}>Project Name</div>
                <div className={style.formField}><input type="text" name="imgTitle" value={formData.imgTitle} onChange={handleChange} required maxlength={40}/></div>


                <div className={style.formLabel}>Project Location</div>
                <div className={style.formField}><input type="text" name="location" value={formData.location} onChange={handleChange} required maxlength={40}/></div>


                <div className={style.formLabel}>Project image URL</div>
                <div className={style.formField}><input type="url" name="imgURL" value={formData.imgURL} onChange={handleChange} required/></div>

                <div className={style.formField}>
                    <input type="submit" value="Update"/>
                </div>
            </form>
            <Link className={style.home}to="/">Go Home</Link>
        </div>
    )
    }
    else{
        return <Link className={style.home}to="/">Go Home</Link>
    }
    
}

export default PageBuilderForm;

Answer 1

在调试了一些之后，我发现由于 webpack 热重载功能发生了重载。一旦我在 webpack 开发服务器中禁用了热重载，我的页面在表单提交时停止刷新。 关于为什么在开发服务器中发生这种情况非常奇怪和令人惊讶。我现在很好奇为什么开发服务器在 api 调用后执行热重载以更新表单中输入的数据。

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

watchContentBase: false,
    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
    // for the WebpackDevServer client so it can learn when the files were
    // updated. The WebpackDevServer client is included as an entry point
    // in the webpack development configuration. Note that only changes
    // to CSS are currently hot reloaded. JS changes will refresh the browser.
   hot: false,

Answer 2

当我使用 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>
    </>
  );
};