Question

我正在尝试让此功能从子组件中的点击调用中触发。

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的新手，这是我使用它的第一个项目。任何建议将不胜感激。

很抱歉，如果不能很好地解释这一点，很高兴在需要时提供其他信息。

谢谢！

Answer 1

您必须触发getPrice方法，现在您要做的就是绑定this上下文。您应该拥有props.getPrice.bind(this)

而不是props.getPrice()

Answer 2

props.getPrice.bind(this)不会调用它只是将“ this”绑定到该函数的函数。

您应该改用props.getPrice()，也不必将子级上下文绑定到它。

一些其他提示/解释 ：

您可以像这样重写所有函数调用：

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

到

getPrice={this.getTotalOfItems}

它将函数传递给子函数，而不是创建触发函数的函数（相同的结果，更好的性能）

但是，如果您这样做：

getPrice={this.getTotalOfItems()}

它将在每个render()处触发该函数，如果该函数通过调用render()来触发this.setState()本身，则会导致无限循环

反应-无法从子道具中触发功能

2 个答案: