Блог

В настоящее время я работаю над простой системой, в которой после нажатия кнопки открывается другая веб-страница. Тем не менее, я стремлюсь отобразить компонент после нажатия кнопки. Таким образом, я инициализировал состояние с логическим значением false . Кроме того, после нажатия кнопки состояние должно быть установлено в true, что должно включить отображение компонента ApartmentBooking01. При запуске кода появляется новая веб-страница из-за объекта history.push. Однако он не отображает мой требуемый компонент ApartmentBooking01. Может кто-нибудь объяснить мне, что я делаю не так?

 class ApartmentInformation01 extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      showBookingInformation: false,
      apartmentInformation: [{
        apartmentNumber: [],
        availableBeds: [],
        pricePerNight: []
      }]
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    this.props.history.push("api/apartments/apartmentbooking01");
    this.setState({
      showBookingInformation: !this.state.showBookingInformation
    });
    
  }

  getApartmentBookingComponent(){
    if(this.state.showBookingInformation){
      return <ApartmentBooking01/>
    }else {
      return null;
      
    }
  }

  componentDidMount() {
    axios.get(`http://localhost:8080/api/apartment/`)
      .then(res => {
        const apartmentInformation = res.data;
        this.setState({ apartmentInformation });

      })
  }


  render() {
    const { apartmentInformation } = this.state;

    return (

      <div className='apartmentInformation-container'>

        <ul>
          {
            apartmentInformation.filter(apartmentInfo => apartmentInfo.apartmentNumber == 1)
              .map(filteredApartment => (
                <div className='apartmentInformation-items'>
                  <h2 className='apartmentssection-01-price'>Price per Night</h2>
                  <p className='apartmentInformation-items-pricePerNight'>€{filteredApartment.pricePerNight},-  </p>
                  <h2 className='apartmentssection-01-beds'>Available Beds</h2>
                  <p className='apartmentInformation-items-availableBeds'>{filteredApartment.availableBeds} Beds</p>
                </div>

              ))
          }
        </ul>
   
        <button variant="btn-success" onClick={this.handleClick}>More information</button>
        {this.getApartmentBookingComponent}
   
      </div>




    )

  }


}

export default withRouter (ApartmentInformation01)
 

Попробуйте добавить event.preventDefault() handleClick функцию at. Это должно быть в первой строке.

также вы должны добавить ключи для вашего метода сопоставления:

 <div className='apartmentInformation-items' key={appId}>