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 Loop仅返回第一个对象，为什么？

因为你在for...of体内使用了return语句，这就是打破循环并返回结果。删除返回并检查它将打印所有值。

检查此代码段：

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中的压倒性约定只是构造函数以大写字母开头。所有其他功能都以小写字母开头。

ES6 - Destructuring和For of Loop仅返回第一个对象

2 个答案: