2017-12-07 31 views
1

状態からPlotオブジェクトの配列を取得する接続されたReactコンポーネントがあります。React-Redux:状態からオブジェクトの配列をフィルタリングします。

また、状態からいくつかの文字列配列を取得します。このように各プロパティが文字列であることを...

{ name, variety, region, grower} 

function mapStateToProps(state) { 
    return { 
     plots: state.plots.plots, 
     varietyFilter: state.plots.varietyFilter, 
     regionFilter: state.plots.regionFilter, 
     growerFilter: state.plots.growerFilter, 
     plotNameFilter: state.plots.plotNameFilter 
    }; 
} 

各プロットは次のようになります。

これらのフィルタ配列に適切なプロパティがあるかどうかによって、プロットをフィルタリングしたいと考えています。

標準溶液は

const filteredArray = inputArray.filter(a => filterArray.indexOf(a.property) 

私はこのアプローチを持っている三つの問題があるようなものを使用することです。まず、フィルター配列が空であれば、フィルタリングされた配列の要素は渡されませんが、それらはすべて通過します。次に、状態から表示されるフィルタ配列がまだ初期化されていない場合はどうなりますか? indexOfが使用できないため、エラーが発生します。第三に、私はこれらのフィルタメソッドを連鎖したいが、何らかのフィルタ配列が初期化されたものだけ連鎖したい。

これまでのところ、私はこれを作ってみた:

if (this.props.plots) { 
      filteredProps = this.props.plots.filter(function(plot) { 
       if (!varietyFilter.indexOf) { 
        return true; 
       } 
       return varietyFilter.indexOf(plot.variety) > -1; 
      }); 
     } 

ちょうどしかし、すべてを通過すると思われること。最初のreturn文を削除すると、コンポーネントが最初に初期化されたときにindexOfメソッドが存在しないというエラーが発生します。

したがって、2つの質問。まず、各オブジェクトの特定のプロパティが、状態に存在していても存在していない可能性のある文字列の配列に含まれているかどうかについて、オブジェクトの配列をフィルタリングするにはどうすればよいですか?次に、元の配列内のオブジェクトの異なるプロパティに対応する一連の配列に対して、これをどうやって行うのですか?あなたが行うことができ、filterArrayは空の配列の場合は、すべての要素を通過させるために、それがnullまたは未定義だ場合はエラーを防止するために

+0

あなたがで作業している変数のそれぞれの代表的な値を提供していただけますか?私はプロットとフィルター?私はまだオブジェクトの配列を扱っているのか、配列を含むオブジェクトを扱っているのかはまだ分かりません。 – Jaxx

答えて

1

const filteredArray = inputArray.filter(a => (filterArray || []).length === 0 || filterArray.includes(a.property)); 

次のコードは、中filterArrayのデフォルト値として空の配列を設定しました場合、それがnullまたは未定義です:配列の長さが正の場合

filterArray || [] 

、以下の部分は、フィルタリングを実行します。

|| filterArray.includes(a.property) 

これらのコードは、当です:mutlipleフィルタはによって行うことができるチェーン

const filteredArray = inputArray.filter(a => { 
    if (!filterArray) { 
     filterArray = []; 
    } 
    if (filterArray.length === 0) { 
     return true; 
    } else { 
     return filterArray.includes(a.property); 
    } 
} 

var filters = [ 
    { prop: 'prop1', filterArray: ['abc', 'def'] }, 
    { prop: 'prop2', filterArray: ['abc'] }, 
    { prop: 'prop3', filterArray: ['abc', 'cde'] } 
]; 

var filteredArray = [...inputArray]; // Copy inputArray 

filters.forEach(filterObj => { 
    filteredArray= filteredArray.filter(a => (filterObj.filterArray || []).length === 0 || filterObj.filterArray.includes(a[filterObj.prop])); 
}); 
+0

2つの質問: 1)filterArrayまたは空白配列の長さが0であるかどうかを確認するのはなぜですか?空の配列の長さは常に0なので、このチェックでは必ずしもtrueに戻りませんか? 2)filterArray.indexOf(a.property)を確認するだけではどのように機能しますか?なぜ、indexOfの値が-1より大きいかどうかを確認する必要はありませんか? –

+1

2)array.prototype.includesを使用するように変更しました(trueまたはfalseを返します)。 indexOfでは、filterArray.indexOf(a.property)でなければなりません!== -1 1)配列が空でない場合、filterArray || []はfilterArray自体を評価し、長さは正の値です(filterArray || [])。length === 0はfalseに評価され、最終的な戻り値はfilterArray.includes(a.property) – Faly

+0

です。ありがとうございます。私は、ES6の機能を熟知している人々を見ると、本当に良い気分になります。 –

関連する問題