React Component не перерисовывается в setState

Question

У меня следующий код.Я устанавливаю состояние с помощью метода setState (this.setState({ country: "", offset: "" });), и метод не вызывает повторную визуализацию метода render().

  state = { country: "", offset: "" };
  onClicked = () => {
    console.log("Fine Click away");
    // Get the call back from props
    let country = this.state.country;
    let offset = this.state.offset;
    this.setState({ country: "", offset: "" });
    const callback = this.props.onpress;

    if (callback) {
      callback(country, offset);
    }
  };
getTheCountryName = event => {
    this.setState({ country: event.target.value });
  };
  getTheOffSet = e => {
    this.setState({ offset: e.target.value });
  };
render() {

    const Caption = this.props.caption;
    return (
      <div>
        <br></br>
        <br></br>
        <div>Please enter the name of country and offset:</div>
        <input
          placeholder="Name of Country"
          onChange={this.getTheCountryName}
        />
        <input placeholder="offset" onChange={this.getTheOffSet} />
        <br></br>
        <br></br>
        <button className="rectangular-button" onClick={this.onClicked}>
          <div className="caption">{Caption}</div>
        </button>
      </div>
    );
  }
}```

Answer 1

Сброс состояния в любом качестве не приведет к обновлению входных значений, потому что вы фактически не используете свое состояние в возвращаемом вами JSX.Приведенный ниже код будет подавать значения на входы, чтобы они обновлялись при изменении вашего состояния.Вы можете прочитать о формах и контролируемых входах в React здесь :

class App extends React.Component {
   state = { country: "", offset: "" };
  onClicked = () => {
    console.log("Fine Click away");
    // Get the call back from props
    let country = this.state.country;
    let offset = this.state.offset;
    this.setState({ country: "", offset: "" });
    const callback = this.props.onpress;

    if (callback) {
      callback(country, offset);
    }
  };
getTheCountryName = event => {
    this.setState({ country: event.target.value });
  };
  getTheOffSet = e => {
    this.setState({ offset: e.target.value });
  };
render() {

    const Caption = this.props.caption;
    return (
      <div>
        <br></br>
        <br></br>
        <div>Please enter the name of country and offset:</div>
        <input
          placeholder="Name of Country"
          onChange={this.getTheCountryName}
          value={this.state.country}
        />
        <input value={this.state.offset} placeholder="offset" onChange={this.getTheOffSet} />
        <br></br>
        <br></br>
        <button className="rectangular-button" onClick={this.onClicked}>
          <div className="caption">Reset</div>
        </button>
      </div>
    );
  }
}