19

を使用してコンポーネントをレンダリングする JavaScript 配列がありましたarray.map。Mapキーと値のペアを使用してアイテムをより簡単に検索できるようにするために、この配列を es6に切り替え、マップ上で a.mapからa に切り替えましたforEach。内部forEachで React コンポーネントを返す render メソッドを呼び出していますが、レンダリングされていません。内のコンポーネントをレンダリングするにはどうすればよいforEachですか?

<div className='gallery__items'>
    {resultsByGuid.forEach((result, index) => {
        key++;
        this.renderGalleryItem(result, key);
    })} 
</div>

renderGalleryItem メソッドは次のとおりです。

renderGalleryItem = (item, index) => {
    const { gridItemSelected, itemThumbnailRequested } = this.props;
    return (
        <GalleryItem
            key={index}
            item={item}
            onClick={gridItemSelected}
            fetchThumbnailFunc={itemThumbnailRequested}
        />
    );
};

forEach が何も返さないことは理解していますが、その中でレンダリングできないということですか?

4

4 に答える 4

14

あなたは正しいです、forEach何も返しませんmap。代わりに使用してください。JSXコンポーネントの配列が返されます。

Map を使用すると、キーにもアクセスできます。resultsByGuid.map((item, key) => { })

編集Map銃をジャンプして、データ構造を使用していたことを読んでいないことをお詫びします。forEach戻り値が必要なため、何もレンダリングしません。独自のArray.maplike イテレータを実装できます。

const mapIterator = (map, cb) => {
  const agg = [];
  for(let [key, value] of map) {
    agg.push(cb(value, key));
  }
  return agg;
};

<div className='gallery__items'>
  {mapIterator(resultsByGuid, (result, index) => {
    key++;
    return this.renderGalleryItem(result, key);
  })}
</div>

編集2そして、私にとって明らかであるべきことを指摘してくれた@zerkmsに感謝します：

<div className='gallery__items'>
  {Array.from(resultsByGuid.values()).map((result, index) => {
    key++;
    return this.renderGalleryItem(result, key);
  })}
</div>
于 2016-02-23T23:55:04.287 に答える