React中调用setState无法更新状态清空表单的问题求助

问题原因 #

• 核心错误：所有表单元素的value属性统一绑定了不存在的this.state.value，并未绑定各自对应的状态字段
  你的handleChange逻辑是将输入值存储到和表单元素name属性对应的状态字段中（比如name="question"的输入框值会被存入this.state.question），但你在写JSX时给所有输入框、下拉选择器都设置了value={this.state.value}，这个this.state.value你从来没有更新过，所以哪怕你提交后清空了question/option1/genre等字段，表单元素也不会响应状态变化。
• 次要问题：setState回调中的日志写法错误，this.state.question本身就是字符串类型，不存在value属性，所以你打印的this.state.question.value永远是undefined，不影响功能但会误导你排查问题。

解决方案 #

1. 修正所有表单元素的value绑定，替换为对应的状态字段：

return (
<div className="App">
  <header className="nav-container">
    <nav className="my-nav">
      <a href="/">
        <h1 className="brand-name">Admin Panel</h1>
      </a>
       <CgProfile id="pp" size={50}/>
    </nav>
  </header>

  <main className="main-body">
  <div id = "message"></div>
   <div className="form-container">
    <form>
    {/* 这里value改成this.state.genre */}
    <select name = "genre" value = {this.state.genre} onChange={this.handleChange}>
      <option value = ''>Select a Genre</option>
      <option value = "gk">General Knowledge</option>
      <option value = "gScience">General Science</option>
      <option value = "entertainment">Entertainment</option>
      <option value = "sports">Sports</option>
      <option value = "Politics">Maths</option>
      <option value = "geography">Geography</option>
    </select>

      {/* 下面所有输入框分别绑定对应的状态字段 */}
      <input type="text" placeholder="Enter Question" spellCheck="true" name="question" value={this.state.question} onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 1" spellCheck="true" name="option1" value={this.state.option1}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 2" spellCheck="true" name="option2" value={this.state.option2}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 3" spellCheck="true" name="option3" value={this.state.option3}  onChange={this.handleChange}></input>
      <input type="text" placeholder="Option 4" spellCheck="true" name="option4" value={this.state.option4}  onChange={this.handleChange}></input>
      
      <button type="button" onClick={this.handleSubmit}>Add</button>
    </form>
    </div>
  </main>
</div>
);

2. 可选修正：调整setState回调的日志写法，方便排查问题

this.setState({
  question:'',
  option1:'',
  option2:'',
  option3:'',
  option4:'',
  genre:''
},()=>{
  console.log('SetState called')
  console.log(this.state.question) // 去掉.value
})

额外优化建议 #

不要直接用ReactDOM.render渲染消息提示，不符合React的声明式写法。可以在state中新增message和messageType字段，提交后更新这两个字段，直接在JSX中渲染提示即可，避免直接操作DOM。

内容的提问来源于stack exchange，提问作者Abhilekh Gautam