Question

我的循环重复不起作用，我使用React在屏幕上渲染，但只出现一个元素，我的数组有12个元素。有人可以告诉我为什么吗？

＆＃13;

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

＆＃13;

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上的映射更容易。第一次迭代后循环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>
    })
  )
}

循环不起作用

2 个答案: