反应useState Hook-无法清除表单数据上的状态

Question

稍有新手的反应就会钩住用户。尝试提交博客文章表单，包括标题，作者和URL。我可以正确提交表单，并且值保存在数据库中，但是无法清除表单中的数据。

我保持这种状态

  const [newBlog, setNewBlog] = useState({ url: "", author: "", title: "" });

并处理表单更改以更新状态，如下所示：

  const handleBlogChange = e => {
    const { name, value } = e.target;
    setNewBlog({ ...newBlog, [name]: value });
  };

我的输入字段之一的示例设置（所有三个字段都相同）

 <form className="form" onSubmit={addBlog}>
<div className="col-lg-9">
                    <input
                      className="form-control"
                      id="title"
                      aria-describedby="emailHelp"
                      placeholder="Enter title"
                      name="title"
                      value={newBlog.title}
                      onChange={handleBlogChange}
                    />
                  </div>

这是我的addBlog函数。您可以看到我在哪里注释掉了一种清除导致问题的状态的版本。

const addBlog = event => {
    event.preventDefault();

    const { url, title, author } = newBlog;

    const blogObject = {
      url,
      title,
      author
    };

    blogService
      .create(blogObject)
      .then(data => {
        setBlogs(blogs.concat(data));
        showMessage(`Success! ${newBlog.title} by ${newBlog.author} was added`);
        // setNewBlog([...newBlog, { url: "", title: "", author: "" }]);
      })
      .catch(error => {
        showMessage(
          `Sorry can't add blog. Here's why: ${error.response.data.error}`,
          false
        );
      });
  };

我还尝试了各种变体，这些变体将数据保留在表单中，没有错误，但没有清除表单。例如

setNewBlog(''), setNewBlog([]) and 
setNewBlog(newBlog.title='')

什么都没用。