web-dev-qa-db-ja.com

配列の一部のみをマッピングすることは可能ですか？ （Array.map（））

React.jsをフロントエンドフレームワークとして使用してプロジェクトを構築しています。特定のページで、ユーザーに完全なデータセットを表示しています。この完全なデータセットを含む配列があります。 JSONオブジェクトの配列です。このデータをユーザーに提示するという点では、現在、Array.map（）を使用してデータの各項目を返すことにより、データセット全体を表示しています。

これは正しい方向への一歩ですが、今では全体ではなく、データセットの一部のみを表示する必要があります。また、表示されているデータセット全体の量を把握するための制御も必要です。まだ表示されていないデータセットの量。基本的に、私はユーザーにデータのより多くの項目をロードする「もっと見る」ボタンのようなものを構築しています。

これが私が現在使用しているもので、 'feed'はJSONオブジェクトの配列を表します。 （これにより、データセット全体が表示されます。）

 return (
  <div className={feedClass}>
  {
    feed.map((item, index) => {
      return <FeedItem key={index} data={item}/>
    })
  }
  </div>
);

配列を事前に分割せずに、配列の一部のみで.map（）を使用できるかどうか疑問に思っていますか？考えられる解決策は、完全なデータセットを保持し、それを部分に分割し、次にそれらの部分を.map（）することですが、中断することなく配列の一部を.map（）する方法はありますそれ？

あらゆるフィードバックを歓迎します。ありがとう！

javascriptarraysjsonreactjs
8
connected_user

マッピング手順をハックしてこの問題を解決しようとしないでください。

代わりに、マッピングの前に slice()リストを最初に正しい長さに します。

class Feed extends React.Component {
  constructor(props) {
    super(props)
    
    this.handleShowMore = this.handleShowMore.bind(this)
    
    this.state = {
      items: ['Item A', 'Item B', 'Item C', 'Item D'],
      showItems: 2
    }
  }
  
  handleShowMore() {
    this.setState({
      showItems: 
        this.state.showItems >= this.state.items.length ?
          this.state.showItems : this.state.showItems + 1
    })
  }
  
  render() {
    const items = this.state.items.slice(0, this.state.showItems).map(
      (item) => <div>{item}</div>
    )
    
    return (
      <div>
        {items}
        <button onClick={this.handleShowMore}>
          Show more!
        </button>
      </div>
    )
  }
}
  
ReactDOM.render(
  <Feed />,
  document.getElementById('root')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'></div>
23
Timo

配列の一部をマップするだけの場合は、まず配列をfilter（）して、条件に従って予想される部分を取得する必要があります。

array.filter(item => <condition>).map();
3
kevin ternet

配列をマッピングする前に slice 関数を使用することができます。そこでページ付けを行いたいようです。

var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
var citrus = fruits.slice(1, 3);

// fruits contains ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']
// citrus contains ['Orange','Lemon']
2
dobleUber

Array.reduceはあなたが望んでいることをするはずです。必要な範囲に応じて、ifステートメントを変更するだけです。

var excludeAfterIndex = 5;

feed.reduce((mappedArray, item, index) => {
  if (index > excludeAfterIndex) { // Whatever range condition you want
    mappedArray.Push(<FeedItem key={index} data={item}/>);
  }

  return mappedArray;
}, []);
2
Salomao Rodrigues

はい、インデックスに基づいて配列の一部をマップできます。例えば：

yourArray = yourArray.map(function (element, index, array) {
        if (array.indexOf(element) < yourIndex) {
            return {
               //logic here
            };
        } else {
            return {
                //logic here
            };
        }

    });
2
Popeye

_Array#map_ すべてのアイテムを反復します。

map()メソッドは、この配列内のすべての要素で提供された関数を呼び出した結果を含む新しい配列を作成します。

_Array#filter_ を使用できます

filter()メソッドは、提供された関数によって実装されたテストに合格したすべての要素を含む新しい配列を作成します。

必要なアイテムについて、次にマップを必要なフォーマットに適用します。

1
Nina Scholz

配列の一部のみをマップするバージョンのmap（）関数はありません。

.map（）を.filter（）と組み合わせて使用​​できます。

現在の要素のインデックスをマップの2番目の引数として取得します。現在のページとページサイズの変数がある場合は、実際にスライスすることなく、配列から適切なページを非常に簡単にフィルターできます。

var currentPage = 1;
var pageSize = 25;

dataArray.filter(function(elt, index) {

    var upperThreshold = currentPage * pageSize;
    var lowerThreshold = currentPage * pageSize - pageSize;

    return index < upperThreshold && index > lowerThreshold;

});
1
Anton v B