循環陣列：ReactJS對象作爲React子項無效

Question

render() { 
    var NewsCards = this.state.news.map((b,i)=>{ 
     return(
      <div key={i} className="row"> 
       <div className="col-10"> 
        <img src={b.image} className="img-fluid"/> 
       </div> 
      </div> 
     ) 
    }) 
    return (
     <div className="container-fluid global-container-bottom-padding"> 
      {RenderIf(this.state.loading)(
      <div id="cssload-pgloading"> 
       <div className="cssload-loadingwrap"> 
        <ul className="cssload-bokeh"> 
         <li></li> 
         <li></li> 
         <li></li> 
         <li></li> 
        </ul> 
       </div> 
      </div> 
      )} 
      {RenderIf(!this.state.loading)(
       { NewsCards } 
      )} 
     </div> 
    ); 
} 

不太清楚我在哪裏出錯了。

編輯：

this.state.news是對象

[ 
    { 
     "image":"imgurl", 
     "link":"imglink" 
    }, 
    { 
     "image":"imgurl", 
     "link":"imglink" 
    } 
] 

Answer 1

的陣列中的問題就在這裏，因爲你錯誤地使用object property shorthand syntax創建一個對象字面與NewsCard領域：

{RenderIf(!this.state.loading)(
    { NewsCards } 
)} 

請將您的代碼更改爲：

!this.state.loading && 
<div> 
    {NewsCards} 
</div> 

或

{RenderIf(!this.state.loading)(
    <div>{NewsCards}</div> 
)} 

作爲存在用於準備片段沒有支持的是，至少前陣營16.