Реагировать - Не могу получить функцию, чтобы стрелять из дочерних реквизита - PullRequest
Новая
       9

Реагировать - Не могу получить функцию, чтобы стрелять из дочерних реквизита

0 голосов
/ 27 августа 2018

Я пытаюсь заставить эту функцию запускаться при вызове клика в дочернем компоненте. 

getTotalOfItems = () => {

 console.log('anything at all?')
 if (this.props.cart === undefined || this.props.cart.length == 0) {
    return 0
 } else {

  const items = this.props.cart
  var totalPrice = items.reduce(function (accumulator, item) {
    return accumulator + item.price;
  }, 0);

  this.setState({
    estimatedTotal: totalPrice
  });
  };
}

Этот щелчок запускается из компонента корзины 

<button onClick={() => {props.addToCart(item); props.getPrice.bind(this)} }>+</button>

Компонент корзины добавляется здесь к компоненту ItemDetails 

export default class ItemDetails extends Component {
constructor(props) {
    super(props);
    this.state = {
        open: false
    };
}
render() {
    return(
        <div>
            <Button
            className="item-details-button"
            bsStyle="link"
            onClick={() => this.setState({open: !this.state.open})}
            >
            {this.state.open === false ? `See` : `Hide`} item details
            {this.state.open === false ? ` +` : ` -`}
            </Button>
            <Collapse in={this.state.open}>
                <Cart 
                getPrice={this.props.getPrice}
                />
            </Collapse>
        </div>
    )
 }
}

Наконец, компонент ItemDetails добавляется в app.js примерно так: 

 render() {
return (
  <div className="container">
    <Col md={9} className="items">
      <ProductListing products={this.props.initialitems} />
    </Col>
    <Col md={3} className="purchase-card">
      <SubTotal price={this.state.total.toFixed(2)} />
      <hr />
      <EstimatedTotal 
        price={this.state.estimatedTotal.toFixed(2)} />
      <ItemDetails 
        price={this.state.estimatedTotal.toFixed(2)}
        getPrice={ () => this.getTotalOfItems() }
      />
      <hr />
      <PromoCodeDiscount 
        giveDiscount={ () => this.giveDiscountHandler() }
        isDisabled={this.state.disablePromoButton}
      />
    </Col>
  </div>
);
};

Если я удаляю () => перед this.getTotalOfItems (), он запускает функцию onClick, однако вызывает бесконечный цикл повторного рендеринга приложения, что приводит к ошибке.

Есть ли способ исправить это? Я новичок в React, и это один из моих первых проектов, использующих его. Любой совет должен быть оценен.

Извините, если это не объясняется, я с радостью предоставлю любую дополнительную информацию, если потребуется.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 27 августа 2018

props.getPrice.bind(this) не вызывает функцию, она просто привязывает 'this' к ней.

Вместо этого вы должны использовать props.getPrice(), также вам не нужно привязывать к нему контекст детей.

Некоторые дополнительные советы / объяснения :

Вы можете переписать все вызовы функций следующим образом: 

getPrice={ () => this.getTotalOfItems() }

до 

getPrice={this.getTotalOfItems}

Она передаст функцию дочернему элементу вместо создания функции, запускающей функцию (тот же результат, лучшая производительность)

Но если вы сделаете это : 

getPrice={this.getTotalOfItems()}

Она будет запускать функцию в каждом render(), вызывая бесконечный цикл, если функция сама запускает render(), вызывая this.setState()

0 голосов
/ 27 августа 2018

Вам нужно вызвать метод getPrice, теперь все, что вы делаете, это привязываете this контекст. Вместо props.getPrice.bind(this) вы должны иметь: props.getPrice()

...