試圖在React中映射數組，但沒有定義

Question

下面是我的渲染部分，然後是它引用的組件。我得到「李未定義」。我曾嘗試在{}中包裝它，並且此時不確定我缺少什麼。謝謝您的幫助。

渲染部分：

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

}）;

Answer 1

看起來你的第一個代碼段中有幾個小的語法錯誤。具體而言，對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> 
);