Question

我有一个飞行状态，我有一个滑块可以更改最高价格以更改飞行元素的可见性。

maxpriceFilter() {

    var flightOffer = this.state.flightOffer;
    var sliderPrice = this.state.sliderPrice;

    for (var i = 0; i < flightOffer.length; i++) {
        if( flightOffer[i].price > sliderPrice) {   

            this.setState(
                {[flightOffer[i].hiddenprice] : true}
            );
        };
    }

这段代码在状态的根目录中添加一个状态为true的未定义字段。我无法找到任何最佳实践，除了使用计算字段。但我不能让计算字段工作..

有人可以帮帮我吗？

Answer 1

您不希望在循环中执行setState调用，这会使react组件呈现多次。构建一个新的状态对象并调用一次setState。您也不想通过if语句对其进行过滤，而是将之前的值设置为隐藏：

maxpriceFilter() {

    var flightOffer = this.state.flightOffer;
    var sliderPrice = this.state.sliderPrice;
    var newState = {};

    for (var i = 0; i < flightOffer.length; i++) {
        newState[flightOffer[i].hiddenprice] = flightOffer[i].price > sliderPrice;
    }

    this.setState(newState);

    // ...
}

如果您仍然遇到问题，那隐藏价格属性可能不是您所期望的？可能还需要发布你的render（）函数。

Answer 2

在更新状态时，为什么不直接进行渲染，而不是进行循环？

您可能已经遍历flightOffers中的所有render()。所以，只需在那里添加支票。在渲染中，将hiddenPrice={offer.price > sliderPrice}作为道具传递，或直接在控制能见度的地方使用。

为什么呢？因为在这种情况下特定项目的可见性不是状态。这是国家的结果。

在数组中反应更改状态（for循环）

2 个答案: