React表单提交至MongoDB成功后输入框内容无法清空问题咨询

问题原因 #

你遇到的表单无法清空的问题主要有3个核心原因：

• 你的自定义InputField组件没有和formData状态做双向绑定，缺少value属性关联，属于典型的受控组件配置缺失，状态清空后视图不会同步更新
• handleChange逻辑存在错误：无论修改哪个输入框，都会先强制把tags字段设置为当前输入值按逗号分割的数组，只有修改tags输入框时才需要做分割处理
• 第三方组件react-file-base64没有绑定重置逻辑，状态清空后组件自身不会同步更新显示

修复方案 #

1. 修正handleChange逻辑 #

const handleChange = (e) => {
  if (e.target.name === 'tags') {
    // 只有修改tags字段才做分割处理
    setFormData({ ...formData, [e.target.name]: e.target.value.split(",") })
  } else {
    setFormData({ ...formData, [e.target.name]: e.target.value })
  }
}

2. 给所有InputField添加value属性绑定 #

将表单输入框和formData状态做双向绑定，状态更新时视图同步变化：

<InputField 
  name="creator"
  label="Creator"
  handleChange={handleChange}
  value={formData.creator}
/>
<InputField 
  name="title"
  label="Title"
  handleChange={handleChange}
  value={formData.title}
/> 
<InputField 
  name="message"
  label="Message"
  handleChange={handleChange}
  value={formData.message}
/>
<InputField 
  name="tags"
  label="Tags"
  handleChange={handleChange}
  // tags是数组，转成逗号分隔的字符串显示在输入框
  value={formData.tags.join(',')}
/>

3. 给FileBase组件加key实现重置 #

新增状态控制react-file-base64组件重新渲染，清空已选文件的显示：

// 新增状态
const [fileKey, setFileKey] = useState(0)

const clearForm = () => {
  setFormData({ creator : "", title : "", message : "", tags : "", selectedFile : ""})
  // 修改key让FileBase重新挂载，清空已选文件
  setFileKey(prev => prev + 1)
}

修改FileBase配置：

<FileBase
  key={fileKey}
  type="file"
  multiple={false}
  onDone={ ({base64}) => setFormData({...formData, selectedFile : base64}) }
/>

4. （可选优化）提交成功后再清空表单 #

如果你的createPost是异步的Redux Thunk请求，原写法会在发起请求后立刻清空，还没等接口返回结果，建议调整为：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    // 等待异步请求完成再清空表单
    await dispatch(createPost(formData));
    clearForm()
  } catch (error) {
    console.log(error);
  }
}

内容的提问来源于stack exchange，提问作者The Jazz song