使用嵌套值映射对象数组并返回

Question

我正在尝试使用嵌套值映射对象数组并返回它。

我能够返回 tableheaderlist 但不能返回过滤的会话。我是不是遗漏了什么或哪里出了问题？

杰森

  hosts: "[{"HostName":"user28.abc.com",

       "Count":2,

       "Sessions":[{"StartTime":"00:04:30",

                    "LastUserActivity":"00:00:46",

                    "DisplayName":"N/A",

                    "UserName":"user28",

                    "Status":"Running",

                    "Visibility":false,

                    "Token":"8A2EB"},

                    {"StartTime":"00:03:43",

                     "LastUserActivity":"00:03:43",

                     "DisplayName":"N/A",

                     "UserName":"",

                     "Status":"Disconnected",

                     "Visibility":true,

                     "Token":"2EBXZY"}

                  ]

    },

{ "HostName":"user27.xyb.com",

        "Count":2,

        "Sessions":[

                    {"StartTime":"00:00:1",

                     "LastUserActivity":"00:00:00",

                     "DisplayName":"N/A",

                     "UserName":"user27",

                     "Status":"Running",

                     "Visibility":false,

                     "Token":"32C5C"},

                    {"StartTime":"00:00:06",

                     "LastUserActivity":"00:00:02",

                     "DisplayName":"N/A",

                     "UserName":"test2",

                     "Status":"Running",

                     "Visibility":false,

                     "Token":"A9D45"

                    }

                   ]

      }]

代码：

 renderSessionInfo() {

    let content = [];

    if (!this.state.activeHosts) {

      return null;

    }

    content =

      this.state.activeHosts.map((hosts) => {

        return (<div>

          {renderHostDisabledInfo}

          {this.renderTableHeaderList(hosts)}

          {this.renderFilteredSessions(hosts)}

        </div>);

      });

    return (<div>

      {content}

    </div>);

  }

预期结果：如果 Visibility 为 false，则应显示会话信息（用户名、显示名、状态、开始时间和上次用户活动）。

Answer 1

这里的问题是您错误地实现了地图功能。renderFilteredSessions(hosts) 应该返回过滤的会话，但它不返回任何内容。在下面的代码部分添加一个返回：return filteredResult.map((session) => {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <ul className="sessionmanager__table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__name">{session.UserName}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__application">{session.DisplayName}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__status">{session.Status}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__duration">{session.StartTime}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.terminateButton(session.UserName)}&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; });您可以使用过滤器代替地图。以下是您可以以更好的方式编写的方法：&nbsp; renderFilteredSessions(hosts) {&nbsp; &nbsp; if (!hosts.Sessions) {&nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; }&nbsp; &nbsp; /* Filter out only those Sessions where Visibility is true */&nbsp; &nbsp; var filteredResult = hosts.Sessions.filter((session) => {&nbsp; &nbsp; &nbsp; return session.Visibility === true; // or return !!session.Visibility;&nbsp; &nbsp; });&nbsp; &nbsp; if (filteredResult.length === 0) {&nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div className="session__table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {res.noActiveSessions}&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; return filteredResult.map((session) => {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul className="sessionmanager__table">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__name">{session.UserName}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__application">{session.DisplayName}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__status">{session.Status}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__duration">{session.StartTime}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.terminateButton(session.UserName)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }&nbsp; }

Answer 2

this.state.activeHosts.map(hosts=>hosts.Sessions.map(sessions=><li>sessions.Username</li>)这是作为列表项的一般表示，根据您的需要使用它