![](/img/trans.png)
[英]Getting unexpected token, expected “,” while trying to map an array in React
[英]Trying to map array in React, getting not defined
下面是渲染的一部分,然后是其引用的組件。 我正在“ 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 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>
);
}
});
您的第一個代碼段中似乎有一些小的語法錯誤。 具體來說,對uls.map
的調用是html語法中的javascript,因此應將其包裝在{}中。 lis.map
。
此外, uls.map((lis) => { <ul>...</ul> }
是不返回任何內容的函數。您可能希望將其表示為uls.map((lis) => ( <ul>...</ul> )
或uls.map((lis) => { return (<ul>...</ul>) }
,您可能想使用后者並將調試器設置為如果問題仍然存在,請弄清楚傳遞的數據到底發生了什么。
我通過修復上面提到的語法錯誤,希望對您有所幫助。
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>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.