javascript - 映射数组并返回结果

Question

我正在尝试使用 jsx 中的 map 功能打印正在使用服务器的用户列表。 但我无法渲染和显示结果。

在下面的代码中，我尝试映射 session 并返回列表。

    render() {
        return (
            <div>
                {this.renderTableContent()}
            </div>
            );
    }

 renderTableContent() {
        return(
            <div>
                <ul className="session__table">
                    {this.renderActiveSessionContent()}
                    {this.renderTableButton()}
                </ul>
            </div>
        );
    }                  
    renderActiveSessionContent() {
        if (this.state.activeSessions) {
            this.state.activeSessions.map((session) => {
                return(
                    <div>
                        <li className="sessionsharing__table__name">{session.UserName}</li>
                        <li className="sessionsharing__table__application">{session.DisplayName}</li>
                        <li className="sessionsharing__table__status">{session.Status}</li>
                    </div>
                );
            }
            );
        }
    }
    renderTableButton() {
        return(
            <div>
                <li className="session__table__button">
                    <input type="button" className="session__button" onClick={this.JoinButton.bind(this)} value = "Text" />
                </li>
            </div>
        );
    }

用户申请状态 用户1 xyz 活跃 用户2 abc 活跃

Answer 1

您不返回 this.state.activeSessions.map(...:

renderActiveSessionContent() {
  if (this.state.activeSessions) {
    this.state.activeSessions.map((session) => {
      return(
        <div>
          <li className="sessionsharing__table__name">{session.UserName}</li>
          <li className="sessionsharing__table__application">{session.DisplayName}</li>
          <li className="sessionsharing__table__status">{session.Status}</li>
        </div>
      );
    });
  }
}

此外，在映射数组时，您应该在每次迭代时设置唯一的 key 属性。例如:

<div key={session.id}>
  <li className="session...

React 应该提示它；)(当且仅当项目列表是静态的并且永远不会重新排序时，您才能使用索引，这样索引本质上就成为给定项目的 id)