React js组件，map工程，foreach没有 [英] React js component, map works, foreach doesn't

问题描述

我有一个渲染标签的组件。它通过一个Map循环并显示数据。我尝试使用forEach，但它不起作用。但是，如果我将地图转换为数组（foreach不能在数组上工作），它的工作原理。

这个工程：

$ $ p $ render（ ）{
return（
< div class =container>
{Array.from（this.props.tags.values（））。map（（tag，i）= >（
< Tag
handleKeyDown = {this.handleKeyDown.bind（this）}
handleBlur = {this.handleBlur.bind（this）}
handleTouchTap = {this .handleTouchTap.bind（this）}
handleRequestDelete = {this.handleRequestDelete.bind（this）}
tag = {tag}
key = {i}
/>
））}
< / div>
）
}


$ p
$ b

  render（）{
 return（
< div class =container> 
 {this.props.tags.forEach（（tag，i）=>（
< Tag 
 handleKeyDown = {this.handleKeyDown。 bind（this）} 
 handleBlur = {this.handleBlur.bind（this）} 
 handleTouchTap = {this.handleTouchTap.bind（this）} 
 handleRequestDelete = {this.handleRequestDelete.bind这个）} 
 tag = {tag} 
 key = {i} 
 /> 
））} 
< / div> 
）
} 
  

解决方案

Map＃forEach 不会返回一个新的数组。它们的工作方式与你所期望的完全一样，它是为了从 Array＃map 构建一个从旧映射的新数组。 React.createElement 需要将其子作为参数列表或数组。一般来说，你想把 Map 看作一个普通的 Object ，而不是像数组那样把它转换成数组，如果你想分开管理它的值。
$ b $你使用 Array.from 是一个很好的方法。这就是我通常使用 Map s的方式。如果你想要得到真正的现代性，避免迭代（尽管我只能想象最极端的情况是什么），你总是可以对你的Map的值应用一个迭代器函数，然后传播（$ {

  render（）{
 const asTags = function *（）{
 for（const [ key.tags）{this.props.tags）{
 yield< Tag tag = {tag} key = {key} />; 
} 
}; 
 $ b $ return（
< div class =container> 
 {[... asTags（）]} 
< / div> 
）; 
 
 
 
 $ b $ p 
 $ b 
生成器函数是一个简单的迭代器，其中 yield 它在您的地图中循环的每个条目。我只在那里使用数组，因为我不完全确定如何在JSX中传播参数（我不使用JSX的一个原因）。如果你有 React.createElement 导入为 ce ，你可以简单地说 ce（'div '，{class：'container'}，... asTags（））代替渲染。
 
I have a component that renders tags. It loops through a Map and displays the data. I tryed using forEach but it doesn't work. However it works if I convert the map to an array (foreach doesn't work on the array either). What am I missing here?

This works:
render(){
    return(
        <div class="container">
            {Array.from(this.props.tags.values()).map((tag,i) => (
                <Tag
                    handleKeyDown={this.handleKeyDown.bind(this)}
                    handleBlur={this.handleBlur.bind(this)}
                    handleTouchTap={this.handleTouchTap.bind(this)}
                    handleRequestDelete={this.handleRequestDelete.bind(this)}
                    tag={tag}
                    key={i}
                />
            ))}
        </div>
    )
}
This doesn't:
render(){
    return(
        <div class="container">
            {this.props.tags.forEach((tag,i) => (
                <Tag
                    handleKeyDown={this.handleKeyDown.bind(this)}
                    handleBlur={this.handleBlur.bind(this)}
                    handleTouchTap={this.handleTouchTap.bind(this)}
                    handleRequestDelete={this.handleRequestDelete.bind(this)}
                    tag={tag}
                    key={i}
                />
            ))}
        </div>
    )
}

解决方案
Map#forEach doesn't return a new array. They both work exactly as you'd expect, which is for Array#map to build a new array mapped from the old one. React.createElement needs to take its children as an argument list, or as an array. Generally you want to think of your Map more like a plain Object than as an array, i.e. you convert it to an array if you want to manage its values separately.

Your Array.from use is a fine approach. This is how I'll typically use Maps. If you wanted to get really modern with it, and avoid one of the iterations (though I can only imagine that mattering at all for the most extreme of cases), you could always apply an iterator function to your Map's values, then spread on that iterator.
render() {
  const asTags = function* () {
    for (const [key, tag] of this.props.tags) {
      yield <Tag tag={tag} key={key} />;
    }
  };

  return (
    <div class="container">
      {[...asTags()]}
    </div>
  );
}
The generator function is a simple iterator, which yields each of the entries it loops through in your Map. I only use the array in there because I'm not totally sure how to spread arguments inside a JSX (one reason I don't use JSX). If you had React.createElement imported as ce, you could simply say ce('div', { class: 'container' }, ...asTags()) in the render instead.

                        
这篇关于React js组件，map工程，foreach没有的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！