循環無法與反應

Question

我的循環重複不起作用，我使用React在屏幕上呈現，但只有一個元素出現，我的數組有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>。您需要創建一個數組，然後將所有元素推送到那裏。我建議你使用map功能即

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

映射在div s是更容易。循環return第一次迭代後，因此只有一個<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> 
    }) 
) 
}