Question

我正在尝试通过具有嵌套值的对象数组进行映射并返回它。

我能够返回tableheaderlist，但不能返回过滤的会话。我在某处缺少东西或出了错吗？

Json

  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>);
  }

  renderHostDisabledInfo(hosts) {
    return (
      <div id="hostDisabled">
        <span className="sessionmanager__serverheader">{hosts.HostName}</span>
      </div>
    );
  }

  renderTableHeaderList(hosts) {
    return (
      <div>
        <ul className="sessionmanager__table__header" >
          <li className="sessionmanager__table__name">{Name}</li>
          <li className="sessionmanager__table__application">{Application}</li>
          <li className="sessionmanager__table__status">{Status}</li>
          <li className="sessionmanager__table__duration">{Duration}</li>
          <li className="sessionmanager__table__lastactivity">{LastActivity}</li>
        </ul>
      </div>
    );
  }

  renderFilteredSessions(hosts) {
    var filteredResult = [];
    var toBeIgnoredResult = [];
    if (!hosts.Sessions) {
      return null;
    }
    hosts.Sessions.map((session) => {
      if (session.Visibility == false) {
        return filteredResult.push(session);
      }
      else
        return toBeIgnoredResult.push(session);
    })
    if (filteredResult.length == 0) {
      return (
        <div className="session__table">
          {res.noActiveSessions}
        </div>
      );
    }
    else {
      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 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>)

这是列表项的一般表示形式，请根据需要使用

映射具有嵌套值的对象数组并返回

2 个答案: