ループが反応しない

Question

私のループの繰り返しはうまくいかず、画面上でReactを使用していますが、要素が1つしか表示されず、配列には12要素しかありません。誰かが私に理由を教えてくれますか？

import React from 'react' 
 
import '../custom/style.css' 
 

 
export default props =>{ 
 

 
    const renderRows =() =>{ 
 
    const list = props.list || [] 
 
    for (var i = 0; i < list.length; i++) { 
 
     var obj = list[i]; 
 
     return (
 
     <div key={obj.id}> 
 
      <p>{obj.title}</p> 
 
      <img src={obj.images.normal} /> 
 
      </div> 
 
     ) 
 
    } 
 
    
 
} 
 

 

 
    return(
 
     <div id="demo"> 
 
     {renderRows()} 
 
     </div> 
 
      
 
    ) 
 

 
}

Answer 1

あなたは最初のループ反復に<div>を返します。配列を作成し、代わりにすべての要素をプッシュする必要があります。私はdiv秒以上のマッピングが容易になり、すなわち

const renderRows =() => { 
    const list = props.list || []; 
    return list.map(obj => (
    <div key={obj.id}> 
     <p>{obj.title}</p> 
     <img src={obj.images.normal} /> 
    </div> 
)); 
}; 

Answer 2

map機能を使用してお勧めします。最初の反復後のループreturns、したがって1つだけ<div>。

import React from 'react' 
import '../custom/style.css' 

export default rows =() => { 
    return (
    props.list && props.list.map(obj => { 
     <div key={obj.id}> 
     <p>{obj.title}</p> 
     <img src={obj.images.normal}/> 
     </div> 
    }) 
) 
}