ES6 - 解构和循环只返回第一个对象

Question

我有一个通过以下对象循环的反应应用程序：

const topics = [
  {name: 'Mon', color: 'blue', id: 1},
  {name: 'Tue', color: 'red', id: 2},
  {name: 'Wed', color: 'pink', id: 3},
]

我试图在我的功能组件中通过for of loop 解构和循环对象

 export const Data = () => {
       for (let {name, color, id} of topics) {
           console.log(name, color, id) //Only first iteration is outputted
               return (
                <div key={id}>
                    <div>{name}</div>
                    <div>{color}</div>
                </div>  
               )                                               
       }
    }

我只收到1, Mon, blue 我错过了什么？这与return 或render 有关吗？

Answer 1

For of Loop 只返回第一个对象，为什么？

因为您在for...of 正文中使用了return 语句，这会打破循环并返回结果。删除 return 并检查它是否会打印所有值。

检查这个sn-p：

const topics = [
  {name: 'Mon', color: 'blue', id: 1},
  {name: 'Tue', color: 'red', id: 2},
  {name: 'Wed', color: 'pink', id: 3},
]


for (let {name, color, id} of topics) {
   console.log(name, color, id);                       
}

要渲染所有数据使用#array.map而不是for...of循环，这样写：

export const Data = () => (
    <div>
        {
            topics.map( ({ name, color, id }) => {
                return (
                    <div key={id}>
                        <div>{name}</div>
                        <div>{color}</div>
                    </div>  
                )
            })                                               
        }
    </div>
)

Answer 2

在您提出的评论中：

我怎样才能循环并仍然将所有数据返回/呈现为 JSX？

你会返回一个包含元素的数组，通常使用Array#map：

export const Data = () => {
    return topics.map(({name, color, id}) => (
        <div key={id}>
            <div>{name}</div>
            <div>{color}</div>
        </div>  
    ));
};

---

旁注：虽然您可以在自己的代码中做任何您喜欢的事情，但 JavaScript 中的压倒性约定是只有构造函数以大写字母开头。所有其他函数都以小写字母开头。