Блог

Главная - Вопросы по программированию - Почему моя страница react возвращается без нажатия кнопки?

Почему моя страница react возвращается без нажатия кнопки?

#reactjs #button #react-navigation

#reactjs #кнопка #реакция-навигация

Вопрос:

В верхней части страницы react у меня есть панель, в которой отображается номер заказа, и я бы также хотел, чтобы она содержала кнопку «Назад».

У меня есть следующий код, но когда я перехожу на эту страницу, он мигает и автоматически возвращается на предыдущую страницу без нажатия кнопки. Может кто-нибудь, пожалуйста, скажите мне, что я сделал не так?

 import React from "react";
import {  Link} from "react-router-dom";

class Messages extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      isLoading: false,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });
    const proxyurl = "https://cors-anywhere.herokuapp.com/";
    const url =
      "myURL"  
      this.props.location.state.rollNumber;
    fetch(proxyurl   url)
      .then((res) => res.json())
      .then((data) => this.setState({ data: data, isLoading: false }));
  }

  render() {
    const { data, isLoading } = this.state;

    if (isLoading) {
      return <p>Loading ...</p>;
    }

    if (data.length === 0) {
      return <p> no data found</p>;
    }
    
    return (
      <div>
        <div className="detailsBanner">
          <div className="orderID"> <strong>Order number: {this.props.location.state.orderId}</strong></div>
          <div className="returnToApps"><button onClick={this.props.history.goBack()}>return to all orders</button></div>
        </div>

Комментарии:

1. Попробуйте это — onClick={this.props.history.goBack}

Ответ №1:

Вы не должны выполнять функцию внутри onclick

 <button onClick={this.props.history.goBack}>return to all orders</button>

Ответ №2:

Вместо этого используйте onClick={this.props.history.GoBack} вы можете использовать приведенный ниже код:

 <div className="returnToApps">
    <Link to="/"}>return to all orders</Link>
</div>

Ответ №3:

Потому что, поскольку вы написали код таким образом

 <button onClick={this.props.history.goBack()}

когда компонент смонтирован, функция GoBack() будет выполняться напрямую

это похоже на то, что вы помещаете

 {state.someArray.map(item => <span>Name :{item.name}</span>)} 

will render => 
Name: myName0
Name: myName1
Name: myName3

в jsx при загрузке страницы вы увидите имя, в x раз превышающее его значения. Он выполняется напрямую.

Попробуйте написать так

 <button onClick={() => this.props.history.goBack()}

Или то, что написал UKS.

Таким образом, функция не будет запускаться непосредственно при монтировании компонента и будет запускаться только при нажатии на нее. Дайте мне знать, если это поможет

Метки: