状态更新后，React 组件不会重新渲染

问题描述

我遇到了 React 类组件的问题。该组件是一个表单，用于存储用户的输入，并在单击按钮时将收集到的信息提交给主组件。在向上推状态后，当我尝试更新组件的状态以具有默认输入值（submitForm 中的 this.setState(this.baseState)）时，会出现问题。 我正在使用 react chrome 扩展，可以看到状态已更新，因为无法在页面上看到它呈现。 img1:before calling submitForm img2:after calling submitForm,state is updated but can't see changes on the page

非常感谢您对此的看法！

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: '',// 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>
    );
  }
}

解决方法

为所有输入字段提供默认值

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

,

解决方案：

每个字段都需要状态的当前值， 例如 firstName 和 lastName 来自州

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: '',// 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>