React js组件，地图有效，foreach不起作用

小编典典

React js组件，地图有效，foreach不起作用

reactjs

我有一个呈现标签的组件。它遍历地图并显示数据。我尝试使用forEach，但是它不起作用。但是，如果我将地图转换为数组，它就可以工作（foreach在数组上也不起作用）。我在这里想念什么？

这有效：

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>
    )
}

这不是：

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>
    )
}

阅读 385

2020-07-22

共1个答案

小编典典

Map#forEach不返回新数组。它们都完全按照您的预期工作，这是为了Array#map构建一个从旧阵列映射的新阵列。React.createElement需要将其子级作为参数列表或数组。通常，您希望将您的Map内容更像一个普通Object数组而不是数组，也就是说，如果要单独管理其值，可以将其转换为数组。

您的Array.from使用是一种很好的方法。这就是我通常使用Maps的方式。如果您想使其真正现代化，并且避免迭代之一（尽管我只能想象在最极端的情况下根本很重要），则可以始终将迭代器函数应用于Map的值，然后在该值上进行扩展迭代器。

render() {
  const asTags = function* () {
    for (const [key, tag] of this.props.tags) {
      yield <Tag tag={tag} key={key} />;
    }
  };

  return (
    <div class="container">
      {[...asTags()]}
    </div>
  );
}

生成器函数是一个简单的迭代器，它yield在Map中循环遍历每个条目。我只在其中使用数组，因为我不确定如何在JSX内散布参数（我不使用JSX的一个原因）。如果您React.createElement导入为ce，则可以直接ce('div', { class: 'container' }, ...asTags())在渲染中说。

2020-07-22