如何使用带有反应的 for 循环？ [复制]答案

【问题标题】：How do I use for loops with react? [duplicate]如何使用带有反应的 for 循环？ [复制]
【发布时间】：2018-04-05 03:07:36
【问题描述】：

我对反应非常陌生，我真正想要的只是一个简单的 for 循环，它为我的数组中的每个用户创建 menuitem 元素，其标题是他们的名字。所以这就是我写它的方式，但我不知道如何在反应中做到这一点。我认为它可能应该与地图一起使用，但我似乎无法让它工作，希望这里的任何人都可以帮助我。

for (var i = 0; i < Users.length; i++) {
  <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>
}

【问题讨论】：

您不能使用for 循环在 JSX 元素中进行迭代。请改用map。
@MostafizRahman 是正确的。 React 组件需要一个字符串、另一个组件或一个组件数组。 For 循环不返回任何这些。这就是为什么我们必须将 for 循环的值存储在一个变量中并返回该变量。请参阅How To Loop Inside React JSX - React FAQ 或此answer

标签： reactjs for-loop bootstrap-4

【解决方案1】：

您的组件的render 方法，或您的无状态组件函数，返回要渲染的元素。

如果你想使用循环，那很好：

render() {
    let menuItems = [];
    for (var i = 0; i < Users.length; i++) {
        menuItems.push(<MenuItem eventKey=[i]>User.firstname[i]</MenuItem>);
    }
    return <div>{menuItems}</div>;
}

更常见的是看到更实用的样式，例如使用地图返回元素数组：

render() {
    return <div>
    {
        Users.map((user, i) =>
            <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>)
    }
    </div>;
}

请注意，无论哪种情况，您都缺少数组中每个元素的 key 属性，因此您会看到警告。数组中的每个元素都应该有一个唯一的键，最好是某种形式的 ID 而不仅仅是数组索引。

【讨论】：

【解决方案2】：

使用map，您可以：

Users.map((user, index) => (
  <MenuItem eventKey={index}>user.firstname</MenuItem>
));

【讨论】：