3

フライトのある州があり、最大価格を変更してフライト要素の可視性を変更するスライダーがあります。 

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 の未定義のフィールドを追加しています。計算フィールドを使用する以外に、これに関するベスト プラクティスは見つかりません。しかし、計算フィールドも機能しません..

誰かがここで私を助けてくれませんか?

4

2 に答える 2

22

ループで setState 呼び出しを実行したくない場合、react コンポーネントが複数回レンダリングされます。新しい状態オブジェクトを作成し、setState を 1 回呼び出します。また、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() 関数も投稿する必要があるかもしれません。

于 2016-06-06T13:00:48.420 に答える
1

状態を更新するときにループを実行する代わりに、レンダリングをオンにしてみませんか?

おそらく、すでにすべてflightOffersの をループしていますrender()。したがって、そこにチェックを追加するだけです。render 内hiddenPrice={offer.price > sliderPrice}で prop として渡すか、可視性を制御する場所で直接使用します。

なんで？この場合の特定のアイテムの可視性は状態ではないためです。国の結果です。

于 2016-06-06T12:44:15.883 に答える