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

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) => {

    return (

      <div>

        <ul className="sessionmanager__table">

          <li className="sessionmanager__table__name">{session.UserName}</li>

          <li className="sessionmanager__table__application">{session.DisplayName}</li>

          <li className="sessionmanager__table__status">{session.Status}</li>

          <li className="sessionmanager__table__duration">{session.StartTime}</li>

          <li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>

          {this.terminateButton(session.UserName)}

        </ul>

      </div>

    );

  });

您可以使用过滤器代替地图。以下是您可以以更好的方式编写的方法：

  renderFilteredSessions(hosts) {

    if (!hosts.Sessions) {

      return null;

    }

    /* Filter out only those Sessions where Visibility is true */

    var filteredResult = hosts.Sessions.filter((session) => {

      return session.Visibility === true; // or return !!session.Visibility;

    });

    if (filteredResult.length === 0) {

      return (

        <div className="session__table">

          {res.noActiveSessions}

        </div>

      );

    }

    else {

      return filteredResult.map((session) => {

        return (

          <div>

            <ul className="sessionmanager__table">

              <li className="sessionmanager__table__name">{session.UserName}</li>

              <li className="sessionmanager__table__application">{session.DisplayName}</li>

              <li className="sessionmanager__table__status">{session.Status}</li>

              <li className="sessionmanager__table__duration">{session.StartTime}</li>

              <li className="sessionmanager__table__lastactivity">{session.LastUserActivity}</li>

              {this.terminateButton(session.UserName)}

            </ul>

          </div>

        );

      });

    }

  }

Answer 2

this.state.activeHosts.map(hosts=>hosts.Sessions.map(sessions=><li>sessions.Username</li>)

这是作为列表项的一般表示，根据您的需要使用它