响应数组中的更改状态（for循环）答案

【问题标题】：React change state in array (for loop)响应数组中的更改状态（for循环）
【发布时间】：2016-06-06 12:34:45
【问题描述】：

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

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

有人可以帮我吗？

【问题讨论】：

你能分享一下你所在的州是什么样的吗？我可以看到您的状态是一个数组，因此请尝试使用this.setState({flightOffer[i].hiddenprice : true});
@iamsaksham 这实际上是 ES6 的一个功能，您可以在定义对象中动态定义键。 babeljs.io/repl/…

标签： reactjs computed-field setstate

【解决方案1】：

您不想在循环中执行 setState 调用，这将使反应组件渲染多次。构建一个新的状态对象并调用一次 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);

    // ...
}

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

【讨论】：

不确定循环中每次调用的状态。 React 不会在循环结束时合并所有 setState() 调用以仅调用一次吗？
啊，你可能是对的。使用计数变量做了一个小的 jsfiddle，它只记录了一次。尽管如此，我认为调用 setState 一次会更便宜，但这会涉及更多优化而不是功能:) jsfiddle.net/69z2wepo/44677

【解决方案2】：

与其在更新状态时进行循环，不如直接在渲染时进行切换？

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

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

【讨论】：