Question

我有一个使用array.map渲染组件的javascript数组。我将此数组切换为es6 Map，以便能够使用键值对更轻松地查找项目，并在地图上从.map切换到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不会返回任何内容，但这是否意味着我无法在其中呈现？

Answer 1

你是对的，forEach没有返回任何内容，而是使用map，它将返回一个JSX组件数组。

地图也允许您访问密钥：resultsByGuid.map((item, key) => { })

编辑我为跳枪而不是读到您使用Map数据结构而道歉。 forEach因为需要返回值而无法呈现任何内容，您可以像迭代器一样实现自己的Array.map：

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>

Answer 2

使用数组解构的danday74示例略有改进。使用选项ES6 Map：

<select>
  {
    [...options].map(([key, value]) => {
      return <option key={ key } value={ key }>{ value }</option>
    })
  }
</select>

Answer 3

另一个选项，其中options是es6 Map（）..

<select>
  {
    [...options].map((entry) => {
      let key = entry[0]
      let value = entry[1]
      return <option key={ key } value={ key }>{ value }</option>
    })
  }
</select>

Answer 4

如果在地图上调用.entries()，您将获得一个迭代器对象，该对象对于每个键/值对包含一个结构为[key, value]的数组，如上所述here。

所以你可以这么做：

<div className='gallery__items'>
  {resultsByGuid.entries().map((result) => {
    return this.renderGalleryItem(result[1], result[0]);
  })}
</div>

我仍然想知道，如果有更简单的解决方案。

forEach over JS6中的es6 Map

4 个答案: