React - 表单提交后清除表单数据

问题描述

提交表单数据后，我的 React 表单没有清除。故障在哪里？我可以看到表单已成功提交到包含所有表单内容的 mongoDB 数据库，但问题是提交值后它没有清除已填写的输入。

import React,{useState} from 'react'
import { Paper,Typography,Button } from "@material-ui/core";
import FileBase from "react-file-base64";
import useStyles from "./styles"
import InputField from './InputField';
import { createPost } from "../../redux/actions/postAction";
import {usedispatch} from "react-redux";

const  Form = () =>  {

    const classes = useStyles();
    const dispatch = usedispatch();
    
   
    const [formData,setFormData] = useState({creator : "",title : "",message : "",tags : "",selectedFile : ""});

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        try {

            dispatch(createPost(formData));
            clearForm()
            
        } catch (error) {
            console.log(error);
        }
    }


    const handleChange = (e) => {
        

        setFormData({ ...formData,tags : e.target.value.split(","),[e.target.name] : e.target.value })
        
    }

    const clearForm = () => {

        setFormData({ creator : "",selectedFile : ""})

   }
  

    return (
        <Paper className={classes.paper}>  
            <Typography variant="h6" align="center">CREATE POST</Typography>
            
            <form onSubmit={handleSubmit}>
            
            <InputField 
                name="creator"
                label="Creator"
                handleChange={handleChange}
                
            
            />
            <InputField 
                name="title"
                label="Title"
                handleChange={handleChange}
                
            /> 
            
            <InputField 
            name="message"
            label="Message"
            handleChange={handleChange}
            
            />

            <InputField 
                name="tags"
                label="Tags"
                handleChange={handleChange}
                
             />
            <FileBase
                type="file"
                multiple={false}
                onDone={ ({base64}) => setFormData({...formData,selectedFile : base64}) }
            />

        <Button className={classes.btn} type="submit" variant="contained" color="primary" size="small" fullWidth>Create Posts</Button>
        
        <Button  variant="contained" color="secondary" size="small" fullWidth onClick={ clearForm }>Clear</Button>
        </form>
        </Paper>
    )
}

export default Form

解决方法

在运行 clearForm() 之前尝试等待调度。

例如：

    try {

        await dispatch(createPost(formData));
        clearForm()
        
    } catch (error) {
        console.log(error);
    }
}