Javascript 映射数组并返回结果

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

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

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

render（）{
返回(
{this.renderTableContent（）}
);
}
renderTableContent（）{
返回(

{this.renderActiveSessionContent（）}
{this.renderTableButton（）}

);
}                  
renderActiveSessionContent（）{
if（this.state.activeSessions）{
this.state.activeSessions.map（（会话）=>{
返回(
{session.UserName}
{session.DisplayName}
{session.status}
);
}
);
}
}
renderTableButton（）{
返回(


);
}

用户应用程序状态 用户1 xyz活动

---

User2 abc active

您不会返回this.state.activeSessions.map（…）的

结果：

renderActiveSessionContent（）{
if（this.state.activeSessions）{
this.state.activeSessions.map（（会话）=>{
返回(
{session.UserName}
{session.DisplayName}
{session.status}
);
});
}
}

此外，映射数组时，应在每次迭代中设置唯一的
键
属性。例如：


您不会返回this.state.activeSessions.map（…
）的结果：

renderActiveSessionContent（）{
if（this.state.activeSessions）{
this.state.activeSessions.map（（会话）=>{
返回(
{session.UserName}
{session.DisplayName}
{session.status}
);
});
}
}

此外，映射数组时，应在每次迭代中设置唯一的
键
属性。例如：


renderActiveSessionContent（）{
var sessionContent=[]；
if（this.state.activeSessions）{
var sessionContentDetails=；
this.state.activeSessions.map（（会话）=>{
会议内容详情=
{session.UserName}
{session.DisplayName}
{session.status}
sessionContent.push(
{sessionContentDetails}
);
});
返回(
{sessionContentDetails}
);
}
}
renderActiveSessionContent（）{
var sessionContent=[]；
if（this.state.activeSessions）{
var sessionContentDetails=；
this.state.activeSessions.map（（会话）=>{
会议内容详情=
{session.UserName}
{session.DisplayName}
{session.status}
sessionContent.push(
{sessionContentDetails}
);
});
返回(
{sessionContentDetails}
);
}
}
您需要返回从map函数获得的对象，而且无论何时使用map之类的函数进行标记，都应该包含key属性，以便react可以区分相同的标记

例：

renderActiveSessionContent（）{
if（this.state.activeSessions）{
返回此.state.activeSessions.map（（会话）=>{
返回(
{session.UserName}
{session.DisplayName}
{session.status}
);
}
);
}
返回null；
}
您需要返回从map函数获得的对象，而且无论何时使用map之类的函数进行标记，都应该包含key属性，以便react可以区分相同的标记

例：

renderActiveSessionContent（）{
if（this.state.activeSessions）{
返回此.state.activeSessions.map（（会话）=>{
返回(
{session.UserName}
{session.DisplayName}
{session.status}
 renderActiveSessionContent() {
        var sessionContent = [];
        if (this.state.activeSessions) {
            var sessionContentDetails = <div />;
            this.state.activeSessions.map((session) => {
                sessionContentDetails =
                    <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>
                sessionContent.push(
                    { sessionContentDetails }
                );
            });
            return (
                <div>
                    {sessionContentDetails}
                </div>);
        }
    }

renderActiveSessionContent() {
    if (this.state.activeSessions) {
        return this.state.activeSessions.map((session) => {
            return(
                <div key = {session.UserName}>
                    <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>
            );
        }
        );
    }
    return null;
}