Javascript 尝试在React中映射数组，未定义

下面是渲染的一部分，然后是它引用的组件。我得到的是“li未定义”。我试着用{}来包装它，但现在我不确定我遗漏了什么。谢谢你的帮助

渲染部分：

var uls = _.chunk(_.take(this.state.results, maxICanShow), perColumn);

    return (
        <div>
        uls.map((lis) => {
            <ul className="appt_bd">
                <li className="appt_bd_header" style={{ width: colWidth + '%' }}>
                    <span className="appt_bd_header_main">{this.props.title}</span>
                    <span className="appt_bd_header_sub">Appts Set</span>
                    <span className="appt_bd_header_sub">Appts Show</span>
                </li>
                lis.map((li) => <AppointmentBoardRow key={li.userId} row={li} />)
            </ul>
        })
            </div>
    );

var uls=..chunk（..take（this.state.results，maxICanShow），perColumn）；
返回(
uls.map（（lis）=>{


{this.props.title}
应用程序集
应用程序显示

lis.map（（li）=>）

})
);

以下是它引用的组件：

var AppointmentBoardRow = React.createClass({
render: function () {
    var row = this.props.row;
    return (
        <li className="appt_bd_row" style={{ width: this.props.colWidth + '%' }} key={row.userId}>
            <span className="appt_bd_desc">
                <span className="appt_bd_rank">{row.rank}</span>
                <span className="appt_bd_avatar_container"><div className={row.className}><span className="initials">{row.initials}</span></div></span>
                <span className="appt_bd_user">
                    <span className="appt_bd_description_main">{row.userName}</span>
                    <span className="appt_bd_description_sub">{row.role}</span>
                </span>
            </span>
            <span className="appt_bd_data">
                <span className="appt_bd_data_main">{row.apptsSetCount}</span>
                <span className="appt_bd_data_sub">/{row.apptsSetGoal}</span>
            </span>
            <span className="appt_bd_data">
                <span className="appt_bd_data_main">{row.apptsShowCount}</span>
                <span className="appt_bd_data_sub">/{row.apptsShowGoal}</span>
            </span>
        </li>
    );
}

var AppointmentBoardRow=React.createClass({
渲染：函数（）{
var行=this.props.row；
返回(

{row.rank}
{row.initials}
{row.userName}
{row.role}
{row.apptsSetCount}
/{row.apptsSetGoal}
{row.apptsShowCount}
/{row.apptsShowGoal}

);
}

---

}))

您的第一个代码片段中似乎有几个小语法错误。具体来说，对

uls.map

的调用是html语法中的javascript，因此应该用{}包装。这同样适用于

lis.map

此外，

uls.map（（lis）=>{
..
}

是一个不返回任何内容的函数。您可能希望将其表示为

uls.map（（lis）=>（
..
）

）或

uls.map（（lis）=>{return return（
..

。如果问题仍然存在，您可能希望使用后者并设置一个调试器来确定传入的数据到底发生了什么

我尝试了修复上面提到的语法错误，希望这能有所帮助

var uls = _.chunk(_.take(this.state.results, maxICanShow), perColumn);

return (
    <div>
        {
            uls.map((lis) => (
                <ul className="appt_bd">
                    <li className="appt_bd_header" style={{ width: colWidth + '%' }}>
                        <span className="appt_bd_header_main">{this.props.title}</span>
                        <span className="appt_bd_header_sub">Appts Set</span>
                        <span className="appt_bd_header_sub">Appts Show</span>
                    </li>
                    { lis.map((li) => <AppointmentBoardRow key={li.userId} row={li} />) }
                </ul>
            )
        }
    </div>
);

var uls=..chunk（..take（this.state.results，maxICanShow），perColumn）；
返回(
{
uls.map（（lis）=>(


{this.props.title}
应用程序集
应用程序显示

{lis.map（（li）=>）}

)
}
);

您的第一个代码片段中似乎有几个小的语法错误。具体来说，对

uls.map

的调用是html语法中的javascript，因此应该用{}包装。这同样适用于

lis.map

此外，

uls.map（（lis）=>{
..
}

是一个不返回任何内容的函数。您可能希望将其表示为

uls.map（（lis）=>（
..
）

）或

uls.map（（lis）=>{return return（
..

。如果问题仍然存在，您可能希望使用后者并设置一个调试器来确定传入的数据到底发生了什么

我尝试了修复上面提到的语法错误，希望这能有所帮助

var uls = _.chunk(_.take(this.state.results, maxICanShow), perColumn);

return (
    <div>
        {
            uls.map((lis) => (
                <ul className="appt_bd">
                    <li className="appt_bd_header" style={{ width: colWidth + '%' }}>
                        <span className="appt_bd_header_main">{this.props.title}</span>
                        <span className="appt_bd_header_sub">Appts Set</span>
                        <span className="appt_bd_header_sub">Appts Show</span>
                    </li>
                    { lis.map((li) => <AppointmentBoardRow key={li.userId} row={li} />) }
                </ul>
            )
        }
    </div>
);

var uls=..chunk（..take（this.state.results，maxICanShow），perColumn）；
返回(
{
uls.map（（lis）=>(


{this.props.title}
应用程序集
应用程序显示

{lis.map（（li）=>）}

)
}
);