reactjs - 在按钮上调用 setState 后反应错误无法 POST /TrajetBus

Question

我花了很多时间弄清楚但没有结果，请帮助！

 constructor(props) {
    super(props);
    this.state = {
      cityID: 346,
      cities: [],
      current_city: "Tétouan",
    };
  }
 
  async handleState(cityId){
   await this.setState({cityID : cityId});
  }

  componentDidMount() {
    this.getCities();
  }

  getCities() {
...

在同一个班：

 <TrajetStatus />
              <div className="col-md-4 col-lg-2 form-group">
                <button
                  className="btn btn-primary btn-block"
                  type="submit"
                
                  onClick={()=>this.handleState({cityID: 150})}
                >
                  Chercher
                </button>

当我单击按钮时，我可以检查 state.cityID，其值已更改但页面未重新渲染我收到此错误：无法发布 /TrajetBus

标签： reactjssetstate

Answer 1

export default class ContentTrajetBusPage extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      cityID: 346,
      cities: [],
      current_city: "Tétouan",
    };
  }
 
  async handleState(cityId){
   await this.setState({cityID : cityId});
  }

  componentDidMount() {
    this.getCities();
  }

  getCities() {
    fetch("https://ouissam-backend.herokuapp.com/villes")
      .then((response) => response.json())
      .then((body) =>
        this.setState({
          cities: body,
        })
      );
  }



  render(){
  return(
    <div id="content">
    <section className="container">
      <div className="row">
        <div className="col mb-2">
          <form id="bookingFlight" method="post">
            <div className="form-row">
              <div className="col-md-6 col-lg-2 form-group">
                {/**<input
                  type="text"
                  className="form-control"
                  id="busFrom"
                  required
                  placeholder="Depart"
                  
                >**/}

                {/**<Select
            
            defaultValue={this.state.selected_value}
            options={this.state.cities.map((city) => (city.nom))}
            formatGroupLabel={formatGroupLabel}
        />**/}

                <select
                  id="busFrom"
                  className="form-control"
                  value="Ouazzane"
                  style={{ appearance: "none" }}
                >
                 
                </select>

                <span className="icon-inside">
                  <i className="fas fa-map-marker-alt"></i>
                </span>
              </div>
              <div className="col-md-6 col-lg-2 form-group">
                {/**<input
                  type="text"
                  className="form-control"
                  id="busTo"
                  required
                  placeholder="Destination"
                />**/}
                <span className="icon-inside" style={{ textAlign: "left" }}>
                  <i className="fas fa-map-marker-alt"></i>
                </span>
                <select
                  id="busTo"
                  className="form-control"
                  value=""
                  style={{ appearance: "none" }}
                >
                  {this.state.cities.length > 0 ? (
                    this.state.cities.map((cityArrivee) => (
                      <option value={cityArrivee.nom}>{cityArrivee.nom}</option>
                    ))
                  ) : (
                    <div>
                      <h2>{this.state.cities.length} villes.</h2>
                    </div>
                  )}
                </select>
              </div>
              <div className="col-md-4 col-lg-2 form-group">
                <input
                  id="busDepart"
                  type="text"
                  className="form-control"
                  
                  placeholder="Date De Départ"
                />
                <span className="icon-inside">
                  <i className="far fa-calendar-alt"></i>
                </span>
              </div>
              <div className="col-md-4 col-lg-2 form-group">
                <input
                  id="busReturn"
                  type="text"
                  className="form-control"
                  
                  placeholder="Date De Retour"
                />
                <span className="icon-inside">
                  <i className="far fa-calendar-alt"></i>
                </span>
              </div>

              <TrajetStatus />
              <div className="col-md-4 col-lg-2 form-group">
                <button
                  className="btn btn-primary btn-block"
                
                  onClick={()=>this.handleState({cityID: 150})}
                >
                  Chercher
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
  
  
 
      <div className="row">
        <TrajetBusFilter />
        <TrajetBusResults cityID={this.state.cityID} />
      
      </div>
    </section>
  </div>