嵌套组件中的forceUpdate

我有以下组件，其中将显示产品列表。 CounterComponent被添加到两个地方，一个在ProductCatalog中，另一个在ProductCard中，可以显示为一个模式。我在计数器中显示订购产品的数量。我想在更新一个时同步这两个计数器。对每个计数器状态改变使用forceUpdate并不能解决问题。嵌套组件中的forceUpdate

export default class ProductCatalog extends Component { 

showProductCard(product){ 
    var scope = this; 
    $('.ui.modal.' + product.code) 
    .modal({ 
    onHide: function(){ 
     scope.forceUpdate(); 
    } 
    }).modal('show'); 
} 

render() { 
    var scope = this; 

    return (
     <div className="ui grid" id="productCatalog"> 
      { 
       this.props.products.map(function(raw) { 

        return (
          <div className="product" onClick={scope.showProductCard.bind(scope, product)}></div> 
          <div className="extra content"> 
          <CounterComponent 
           count={scope.props.getProductCount(product)} 
           product={product} 
           onCountChanged={scope.props.onCountChanged}> 
          </CounterComponent> 

          <ProductCard 
          count={scope.props.getProductCount(product)} 
          product={product} 
          onCountChanged={scope.props.onCountChanged}> 
          </ProductCard> 

          </div> 
         ); 
       }) 
      } 

     </div> 
     ); 
    } 
}

来源

2016-05-21 Afflatus

您可以发布您的CounterComponent的代码？通常你不需要使用'''forceUpdate'''，因为当你传递道具的新值时，你的组件应该简单地重新渲染。国际海事组织（IMO）将onCountChanged传递给CounterComponent也有点奇怪，因为你知道计数器值直接在父代中改变，所以对于我来说，它看起来像CounterComponent不需要知道改变时该做什么，因为父代可以处理那个。 –

在这种情况下，最有可能不需要Forceupdate。任何反应组件只有在状态改变或道具改变时才需要重新渲染。
并自动处理此事。

你的情况：

无论是通过你的产品数为道具的<ProductCart>
或保存计数状态。

在你的情况：似乎父母已经知道产品数量，因为你正在调用一个函数来检索它。

更好地将产品数量作为道具传递，而不是调用检索计数的方法。

来源

2016-05-21 12:15:12 wintvelt

嵌套组件中的forceUpdate

回答

相关问题