更新 state 后，React 組件不會重新渲染

Question

我遇到了 React class 組件的問題。 該組件是一個表單，它存儲用戶的輸入，並在單擊按鈕時將收集到的信息提交給主組件。 當向上推 state 后，我嘗試將組件的 state 更新為具有默認輸入值（submitForm 中的 this.setState(this.baseState)）時，會出現此問題。 我正在使用 react chrome 擴展，可以看到 state 已更新，因為無法在頁面上看到它呈現。 img1：調用 submitForm 之前img2：調用 submitForm 之后，state 已更新但在頁面上看不到更改

感謝您對此的想法！

class AttendeeForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: '',
      email: '',
      shirt: 'XS', // default
      skillLevel: 'beginner', // default
    };
    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  handleChange(event) {
    this.setState({
      [event.target.id]: event.target.value,
    });
  }

  submitForm() {
    this.props.addAttendee(this.state);
    this.setState({
      firstName: '',
      lastName: '',
      email: '',
      shirt: 'XS', // default
      skillLevel: 'beginner', // default
    })
  }

  render() {
    return (
      <div className="attendee-form">
        <h2>Register Attendee</h2>
        <label>First Name: </label>
        <input type="text" id="firstName" onChange={this.handleChange}></input>
        <label>Last Name: </label>
        <input type="text" id="lastName" onChange={this.handleChange}></input>
        <label>Email: </label>
        <input type="email" id="email" onChange={this.handleChange}></input>
        <label>Shirt Size:</label>
        <select onChange={this.handleChange} id="shirt" >
          <option value="XS">XS</option>
          <option value="S">S</option>
          <option value="M">M</option>
          <option value="L">L</option>
          <option value="XL">XL</option>
          <option value="XXL">XXL</option>
        </select>
        <label>Skill Level:</label>
        <select onChange={this.handleChange} id="skillLevel" >
          <option value="beginner">beginner</option>
          <option value="intermediate">intermediate</option>
          <option value="expert">expert</option>
        </select>
        <button onClick={this.submitForm}>REGISTER</button>
      </div>
    );
  }
}

Answer 1

為所有輸入字段提供默認值

<input type="text" id="lastName" value={this.state.lastName} onChange={this.handleChange}></input>

Answer 2

解決方案：

每個字段都需要來自 state 的當前值，例如 firstName 和 lastName 來自 state

 class AttendeeForm extends React.Component { constructor(props) { super(props); this.state = { firstName: '', lastName: '', email: '', shirt: 'XS', // default skillLevel: 'beginner', // default }; this.handleChange = this.handleChange.bind(this); this.submitForm = this.submitForm.bind(this); } handleChange(event) { this.setState({ [event.target.id]: event.target.value, }); } submitForm() { this.setState({ firstName: '', lastName: '', email: '', shirt: 'XS', // default skillLevel: 'beginner', // default }) } render() { return ( <div className="attendee-form"> <h2>Register Attendee</h2> <label>First Name: </label> <input type="text" id="firstName" onChange={this.handleChange} value={this.state.firstName}></input> <label>Last Name: </label> <input type="text" id="lastName" onChange={this.handleChange} value={this.state.lastName}></input> <label>Email: </label> <input type="email" id="email" onChange={this.handleChange}></input> <label>Shirt Size:</label> <select onChange={this.handleChange} id="shirt" > <option value="XS">XS</option> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> <option value="XXL">XXL</option> </select> <label>Skill Level:</label> <select onChange={this.handleChange} id="skillLevel" > <option value="beginner">beginner</option> <option value="intermediate">intermediate</option> <option value="expert">expert</option> </select> <button onClick={this.submitForm}>REGISTER</button> </div> ); } } ReactDOM.render( <AttendeeForm />, document.getElementById("root") );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>