反应数组中的更改状态（用于循环）

小编典典

反应数组中的更改状态（用于循环）

reactjs

我有一个有航班的州，并且有一个滑块可以更改最高价格，以更改航班元素的可见性。

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的未定义字段。.除了使用计算字段之外，我无法找到任何最佳实践。但是我也无法使计算字段工作。

有人可以帮我吗？

阅读 269

2020-07-22

共1个答案

小编典典

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

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);

    // ...
}

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

2020-07-22