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

Question

提交表单数据后，我的 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 : "", title : "", message : "", tags : "", 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

Answer 1

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

前：

    try {

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