forceネストしたコンポーネントの更新

Question

次のコンポーネントがあり、製品のリストが表示されます。 CounterComponentはProductCatalogとProductCardの2つの場所に追加されます。これはモーダルで表示できます。注文商品の数をカウンターに表示します。 更新されたときに、これらの2つのカウンタを同期します。それぞれのカウンターの状態の変更に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> 
     ); 
    } 
} 

Answer 1

この場合、Forceupdateはほとんど必要ありません。すべての反応コンポーネントは、状態が変化したり、小道具が変更されたときに再レンダリングする必要があります。
これは自動的に処理されます。あなたのケースでは

：

• のどちらかが<ProductCart>
• に小道具としてあなたの製品数を渡したり、状態の数を保存します。

あなたのケースでは：あなたがそれを取得する関数を呼び出しているので、親は既に製品数を知っているようです。

代わりに、カウントを取得するためのメソッドを呼び出す、小道具として製品数を渡すことがベター。