循环不适用于反应答案

【问题标题】：Loop does not work with react循环不适用于反应
【发布时间】：2017-10-07 21:42:50
【问题描述】：

我的循环重复不起作用，我正在使用 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>
            
    )

}

【问题讨论】：

你的 for 循环中有一个 return 语句。该函数在该点停止运行，因此只返回一个元素。您的意思是使用 list.map 而不是 for 循环？
地图在某种程度上有效，但它是一个对象数组。在图像的情况下，它是一个具有三个属性的对象。我该怎么做才能阅读？示例：“图像”：{“url”：“路径”，“url2”：“路径2”}

标签： javascript arrays reactjs for-loop

【解决方案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>
  ));
};

【讨论】：

地图在某种程度上有效，但它是一个对象数组。在图像的情况下，它是一个具有三个属性的对象。我该如何阅读？
示例：“images”：{“url”：“path”，“url2”：“path2”}

【解决方案2】：

映射divs 更容易。第一次迭代后循环returns，因此只有一个<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>
    })
  )
}

【讨论】：

地图在某种程度上有效，但它是一个对象数组。在图像的情况下，它是一个具有三个属性的对象。我该怎么做才能阅读？示例：“图像”：{“url”：“路径”，“url2”：“路径2”}
我使用 JSON.stringiify 得到它