绑定State的表单提交成功未清空，初始默认值不加载问题

你的问题核心是表单控件没有和State做双向绑定——只监听了输入变化更新State，但没把State的值同步回输入控件，导致初始State值没法渲染，提交后更新State也不会改变输入框内容。

修改方案： #

给每个输入控件添加value属性绑定对应的State变量，同时优化表单提交的绑定方式：

export default function Contact() {
  const [name, setName] = useState('John Doe')
  const [email, setEmail] = useState('me@example.com')
  const [message, setMessage] = useState('Hello, this is test message.')

  const onSubmit = (e) => {
    e.preventDefault()
    const form = {"name": name, "email": email, "message": message}
    return fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(form),
      headers: {'Content-Type': 'application/json'}
    }).then(response => {
      if(response.status === 200){
        setName('')
        setEmail('')
        setMessage('')
      }
    }).catch(err => console.error(err))
  }
  
  return (
      <section>
        <form method='post' onSubmit={onSubmit}>
          <div>
            <label>Name</label>
            <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)}/>
          </div>
          <div>
            <label>Email Address</label>
            <input type="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)}/>
          </div>
          <div>
            <label>Message</label>
            <textarea minLength={5} maxLength={2000} rows="6" name="message" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
          </div>
          <div>
            <button type='submit'>Send Message</button>
          </div>
        </form>
      </section>
  );
}

关键修改点说明： #

• 每个输入控件的value属性绑定对应State变量，实现双向数据同步：初始加载时State默认值自动填充到输入框，提交后清空State，输入框内容也会跟着清空。
• 将表单提交逻辑绑定到<form>的onSubmit事件上，移除按钮的onClick，符合HTML表单的标准处理方式。
• 给catch添加console.error(err)，方便调试请求错误。

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