Question

我正在使用以下组件，其中将显示产品列表。 CounterComponent添加到两个位置，一个在ProductCatalog中，另一个在ProductCard中，可以在模态中显示。我在柜台显示订购产品的数量。我希望在更新一个时同步这两个计数器。在每个计数器状态变化上使用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>
或将计数保存在州。

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

最好将产品计数作为道具传递，而不是调用方法来检索计数。

嵌套组件中的forceUpdate

1 个答案: