React表单提交时Checkbox值重复累加 旧选中项未清空问题如何解决

问题根因 #

你的代码存在3个核心错误，导致复选框值累加残留：

• 状态更新逻辑错误：处理复选框变更时，你修改了复制出来的newcheckes对象，但最终调用setdata时传入的还是旧的data变量，状态没有按预期更新，造成值残留累加
• 缺少checked属性绑定：复选框没有和state中的选中状态做绑定，视图显示和数据状态不同步，进一步触发逻辑异常
• 提交后未重置表单：表单提交完成后没有清空checking数组或者整个表单状态，上次提交的旧值会一直残留在state中

修正后的代码 #

1. HTML部分（新增checked属性绑定）

<div className="mb-3">  
  <label className="mb-2 fw-bold">Checkbox Value</label>    
  <div className="form-check">
    <input 
      className="form-check-input" 
      type="checkbox" 
      name="checking"  
      value="Javascript" 
      onChange={handleChnage} 
      checked={data.checking.includes('Javascript')}
    />
    <label className="form-check-label" htmlFor="flexCheckDefault">Javascript</label>
  </div>
  <div className="form-check">
    <input 
      className="form-check-input" 
      type="checkbox" 
      name="checking" 
      value="React JS" 
      onChange={handleChnage} 
      checked={data.checking.includes('React JS')}
    />
    <label className="form-check-label" htmlFor="flexCheckChecked">React JS</label>
  </div>
  <div className="form-check">
    <input 
      className="form-check-input" 
      type="checkbox" 
      name="checking"  
      value="HTML" 
      onChange={handleChnage} 
      checked={data.checking.includes('HTML')}
    />
    <label className="form-check-label" htmlFor="flexCheckChecked">HTML</label>
  </div>
  <div className="form-check">
    <input 
      className="form-check-input" 
      type="checkbox" 
      name="checking"  
      value="CSS" 
      onChange={handleChnage} 
      checked={data.checking.includes('CSS')}
    />
    <label className="form-check-label" htmlFor="flexCheckChecked">CSS</label>
  </div>
</div>

2. 逻辑部分（修正状态更新+提交后重置）

const [data, setdata] = useState({
  "UserName": "",
  "PhoneNumber": "",
  "email": "",
  "dropDown": "",
  "gender": null,
  "checking": [],
})

const handleChnage = (e) => {
  if (e.target.name !== "checking") {
    setdata({ ...data, [e.target.name]: e.target.value });
  } else {
    const value = e.target.value;
    // 复制原数组做修改，避免直接修改原state
    const newChecking = [...data.checking];
    if (newChecking.indexOf(value) === -1) {
      newChecking.push(value);
    } else {
      newChecking.splice(newChecking.indexOf(value), 1);
    }
    // 传入修改后的新对象更新状态
    setdata({...data, checking: newChecking});
  }
}

const handleSubmit = (e) => {
  e.preventDefault();
  dispatch(allActions.createData(data));
  // 提交完成后重置表单状态，避免旧值残留
  setdata({
    "UserName": "",
    "PhoneNumber": "",
    "email": "",
    "dropDown": "",
    "gender": null,
    "checking": [],
  })
}

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