无法在ReactJS中渲染嵌套地图 [英] Cannot Render Nested Maps In ReactJS
问题描述
我正在尝试嵌套地图以在对象内渲染数组
I am trying to nest maps to render an array within an object
我的卡"组件渲染方法(未嵌套,正在运行):
My Cards Component Render Method (Not Nested, Working):
render() {
return (
<div class="mediator-container">
{this.state.routeList.map(
(route, index) =>
<Card busName={this.state.routeList[index].$.tag} />
)}
<span class="loader">
<span class="loader-inner"></span>
</span>
</div>
);
}
我的卡"组件渲染方法(Nesteing,不起作用!):
My Cards Component Render Method (Nesteing, Not Working!!):
render() {
return (
<div class="mediator-container">
{this.state.routeList.map((route, index) =>
{
{
this.busTitleToDirectionName(this.state.routeList[index].$.tag).map(busDir => {
<Card busName={busDir} />;
});
}
}
)}
<span class="loader">
<span class="loader-inner"></span>
</span>
</div>
);
}
busTitleToDirectionName(int)返回一个字符串数组
busTitleToDirectionName(int) returns an array of Strings
我的卡片"子组件的呈现方法:
My Card Subcomponent's render method:
render() {
// Logging to see if render method is called
console.log("Ran");
return (
<div className="card">
<div className="card-header">
<div className="bus-name">
<p>{this.props.busName}</p>
</div>
</div>
</div>
);
}
工作时没有嵌套的外观(没有足够的声誉来发布图像,因此这里是链接):
How it looks like without nesting when it does work (Not enough reputation to post images so here are the links):
https://i.gyazo.com/66414925d60701a316b9f6325c834c12.png
我还登录了 Card 子组件,以便我们知道 Card 组件已运行,并且它记录了它确实在没有嵌套的情况下被调用
I also log in the Card subcomponent so that we know that the Card component was ran and it logs that it did get called without nesting
https://i.gyazo.com/fb136e555bb3df7497fe9894273bf4d3.png
嵌套时,不会呈现任何内容,并且不会调用Card子组件,因为没有日志记录
When nesting, nothing renders and the Card subcomponent isn't being called as there is no logging of it
https://i.gyazo.com/38df248525863b1cf5077d4064b0a15c.png
https://i.gyazo.com/d6bb4fb413dfc9f683b44c88cce04b8a.png
推荐答案
您可以在嵌套的情况下尝试以下代码.在地图的嵌套中,您必须将嵌套的地图包装在容器中.在这里,我使用React.Fragment(<>)作为容器.
You can try below code in your nested case. In the nesting of map you have to wrap your nested map within a container. Here I use React.Fragment (<> ) as a container.
return (
<div class="mediator-container">
{this.state.routeList.map((route, index) =>
<>
{
this.busTitleToDirectionName(this.state.routeList[index].$.tag).map(busDir => {
<Card busName={busDir} />;
});
}
</>
)}
<span class="loader">
<span class="loader-inner"></span>
</span>
</div>
);
希望它将对您有帮助!
这篇关于无法在ReactJS中渲染嵌套地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!