Arrays 未映射的组件数组

所以我尝试循环遍历一些组件，这样我就可以跟踪组件的高度，以便决定放一个分页符。我有一个组件数组，我正试图映射，但我得到的臭名昭著的映射不是一个函数。这是我的密码

import React，{Component}来自“React”；
从“样式化组件”导入样式化；
从“react sizeMe”导入sizeMe；
const WhiteRow=styled.div`
背景色：#ffffff；
&：之后{
内容：“；
宽度：100%；
身高：100%；
左：0px；
顶部：0px；
背景色：透明；
盒影：0 2px52px-20pxRGBA（132、133、122、0.5）；
位置：绝对位置；
z指数：0；
}
`;
常量P=styled.P`
保证金：0；
`;
类RoomPage扩展组件{
render（）{
const{data，globalData}=this.props；
//console.log（数据）
返回(
{ReportItems.map（items=>(
{items.comp}
))}
);
}
}
导出默认sizeMe（{monitorHeight:true}）（RoomPage）；
const RoomPageHeader=（{data}）=>(
 {data.created_at}
{data.content.title}
观察结果

{data.content.address.address1}
{data.content.address.address2}

{data.content.address.city}{，“}
{data.content.address.state}{data.content.address.zipcode}

);
常量RoomBar=（{data}）=>(

文件室：{data.Room.label}

);
const ReportItems=（{data}）=>[
{
公司：
},
{
公司：
}
];

---

非常感谢您的帮助。我安慰了ReportItems const，并用组件返回了对象数组。

只需将其更改为：

{ReportItems（）.map（items=>{items.comp}）}
//----------^^

---

也要去掉

在最后。
就像我在评论中说的那样。只需首先调用函数，将数据传递给组件，使其获得道具，然后映射到道具上

render() {
  const { data, globalData } = this.props;
  const items = ReportItems({data})
  return (
    <div>
      { items.map(
          (items) => items.comp
        )
      }
      </div>
  );
}

render（）{
const{data，globalData}=this.props；
const items=ReportItems（{data}）
返回(
{items.map(
（项目）=>items.comp
)
}
);
}

不过，我并不确定你的目标/方法是什么。如果您只想渲染一个组件几次，您可以直接渲染，而无需将实例放入这样的数组中。
这是因为
ReportItems
是一个函数，而不是数组<代码>映射

是数组上的一个函数。也许您想先调用该函数，然后得到要映射的数组响应？我不明白你为什么这么做，胡说八道。你是对的。是否有一种方法可以将数据传递到数组@JohnRuddell

const items=ReportItems（{data}）

中的那些项，然后再传递到

items.map

？是的，这是一种很好的传统解决方案，尽管我在渲染组件时监视组件的高度，所以在渲染组件时我需要检查它是否超过某个高度。谢谢你的回答@TylerNichol这应该不会太难，因为您正在渲染项目数组：）当您能够并且能够将答案标记为已接受时，我们将不胜感激！：）谢谢你抽出时间来帮忙！下一个障碍是注入另一个组件，如果该组件在map函数中变得太大。这是一个困难的问题，hahaAlso不得不添加ReportItems（{data}）.map，但这是正确的方向。谢谢