无法在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屋！