javascript – React js组件,map工作,foreach没有

2023年2月25日 187次阅读

我有一个呈现标签的组件.它循环遍历Map并显示数据.我尝试使用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>
    )
}

最佳答案 Map#forEach不会返回新数组.它们都完全按照您的预期工作,这是为了使Array #map构建一个从旧映射映射的新数组. React.createElement需要将其子项作为参数列表或数组.通常,您希望将Map视为普通对象而不是数组,即如果要单独管理其值,则将其转换为数组.

您使用Array.from是一种很好的方法.这就是我通常使用地图的方式.如果你想真正使用它,并避免其中一个迭代(虽然我只能想象在最极端的情况下有问题),你总是可以将迭代器函数应用于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>
  );
}

生成器函数是一个简单的迭代器,它生成它在Map中循环的每个条目.我只在那里使用数组,因为我不完全确定如何在JSX中传播参数(我不使用JSX的一个原因).如果您将React.createElement导入为ce,则可以在渲染中简单地说ce(‘div’,{class：’container’},… asTags()).

点赞