Функция всегда работает в React Component

Question

Я пытаюсь использовать функцию, которая добавляет товар в корзину со страницы сведений в массив корзины в основном компоненте приложения. Всякий раз, когда загружается компонент Product Detail, функция запускается один раз, и когда я нажимаю кнопку «Добавить в корзину», функция работает непрерывно, пока React не прекратит обновление состояния.

Вот мое приложение. js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      cart: []
    };
    this.handleAddToCart = this.handleAddToCart.bind(this);
  }

  handleAddToCart(product) {
    this.setState({
      cart: [this.state.cart, product]
    });
  }
  //I'm using React-Router with history.js
  render() {
    return (
      <Router history={history}>
        <Switch>
          <Route
            path="/product/detail"
            exact
            render={routeProps => (
              <ProductDetail {...routeProps} handleAddToCart={this.handleAddToCart} />
            )}
          />
        </Switch>
      </Router>
    );
  }
}

export default App;

Вот ProductDetail. js

class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      product: {}
    };
  }

  componentDidMount() {
    // Getting data from React Router Link
    const product = this.props.location.state.product;
    this.setState({
      product: product
    });
  }

  render() {
    const product = this.state.product;
    return (
        <Link onClick={this.props.handleAddToCart(this.state.product)}>
          <Button>
             Add to Cart
          </Button>
        </Link>
    )
  }
}

По сути, я хочу, чтобы handleAddToCart запускался только при нажатии кнопки. Кроме того, кнопка onClick была настроена на функцию, но она не работала должным образом

Answer 1

Вы немедленно вызываете его с помощью this.state.product, определяете его как анонимный обратный вызов. Вы можете добавить обработчик onClick к ссылке, но я думаю, что у вас должны быть некоторые ошибки / предупреждения о пропавшей to опоре.

render() {
  const product = this.state.product
  return(
    <Link>
      <Button onClick={() => this.props.handleAddToCart(this.state.product)}>
         Add to Cart
      </Button>
    </Link>
  )
}