リアクションでX要素までレンダリング

Question

50万のレコードを含む非常に巨大なjsonファイルがありました。ユーザーが望むものを見つけるためにフィルタリングできるようにしたいと考えています。ただし、レンダリング250000 <li>はほとんどの人にとって不可能です。

私は50個の要素だけをレンダリングするように反応するような方法はありますか？

現在、私はそれをこのようにレンダリング：

const dataList = data.filter(data => { 
     return data.A.toLowerCase().indexOf(filterText.toLowerCase()) !== -1; 
    }).map(data => { 
     return(
     <li className="list-group-item" key={uuid()} >{data.A}</li> 
     ) 
    }) 

Answer 1

あなたはフィルタリングしているとして、あなたはfilter後sliceを行うことができます：

return data.filter(/*...*/).slice(0, 50).map(/*...*/); 

を開始する場所を最初の引数があり、 2番目は停止する場所です。これらの変数を作成して、ユーザーがレコードをページできるようにすることができます。

return data.filter(/*...*/).slice(from, to).map(/*...*/); 

しかし、それはあなたがすでに表示したい50を持っている場合でも、すべての要素をフィルタリングしていることを意味します。代わりに、必要な要素があるときに停止したいと思うかもしれません。そして、我々はストリーミングパラダイムを破壊している場合、我々はだけでなく、ほかmapに折り畳むことがあります。

const dataList = []; 
let skip = from; 
const max = to - from; 
const filterLowerCase = filterText.toLowerCase(); // Do this *once* 
data.some(function(entry) { 
    if (entry.A.toLowerCase().indexOf(filterLowerCase) !== -1) { 
     if (skip > 0) { 
      --skip; 
     } else { 
      dataList.push(<li className="list-group-item" key={uuid()} >{entry.A}</li>); 
      if (dataList.length == max) { 
       return true; // Stop `some`, we have enough 
      } 
     } 
    } 
    return false; 
});