时间戳

首页 > 解决方案 > 如何使用 .map() 迭代对象并创建数量

javascript - 如何使用 .map() 迭代对象并创建数量

问题描述

我创建了一个带有标签和值键的对象。现在我想做的是使用 .map() 函数为对象中的每个项目创建。

// my object
const ageData = [...Array(71)].map((x, i) => ({ label: i + 10, value: i + 10 }));
//My object looks like 0: {label: 10, value: 10} 1: {label: 11, value: 11}

//What I want to create
<Item label=10 value=10 />
<Item label=11 value=11 />

//My current non-working solution
ageData.map(obj => <Item label=obj.label value=obj.value />)

标签： javascriptreactjsreact-native

解决方案

正如上面提到的评论者，语法需要一些工作。使用功能组件可能是这样的：

const Items = props => {
  return (
    <div>
      {props.someArray.map(obj => (<Item label={obj.label} value={obj.value} />))}
    </div>
  )
}

然后从要在其中显示项目的功能组件或渲染方法返回以下内容：

<Items someArray={ageData} />

其中 ageDate 是您的数组。

请注意，您缺少{}JSX 代码中的表达式周围，以及您从地图返回的 JSX 表达式周围的括号。

奖金：

如果你只需要它返回一个像上面这样的表达式，你可以像这样写你的功能组件更短：

const Items = props => (
  <div>
    {props.someArray.map(obj => (<Item label={obj.label} value={obj.value} />))}
  </div>
)

推荐阅读