IT技术 - JSX 中的 forEach over es6 Map - 吾爱随笔录

JSX 中的 forEach over es6 Map

IT技术 javascript reactjs foreach jsx

2021-05-16 03:04:55

我有一个 javascript 数组，它使用array.map. 我将此数组切换为 es6 Map，以便能够使用键值对更轻松地查找项目，并在 Map 上从 a 切换.map到 a forEach。在内部，forEach我调用了一个返回 React 组件的渲染方法，但它没有被渲染。如何在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个回答

您是对的，forEach不返回任何内容，map而是使用它，它将返回一组 JSX 组件。

Map 也将允许您访问密钥： 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>

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

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

另一种选择，optionses6 Map()在哪里..

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

如果你打电话给.entries()你的地图上，你会得到这对于每一个键/值对包含在结构数组中的迭代器对象：[key, value]提到这里。

所以你可以这样做：

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

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

其它你可能感兴趣的问题

上一篇我擦干了我的灯丝，因为它不能正确粘附，但现在它粘附得有点太好了下一篇react-redux：state.setIn() 和 state.set() 有什么区别？