javascript – 如何使用React.js在JSX中循环对象

所以我有一个React.js组件,我想循环遍历我导入的对象以向其添加 HTML选项.这是我尝试过的,既丑陋又不起作用：

import React from 'react';
import AccountTypes from '../data/AccountType';

const AccountTypeSelect = (props) => {  
  return (
    <select id={props.id} className = {props.classString} style={props.styleObject}>
        <option value="nothingSelected" defaultValue>--Select--</option>
        {
            $.each(AccountTypes,function(index) {
                <option val={this.id}>this.name</option>
            })
        }
    </select>
  );
};

export default AccountTypeSelect;

我从上面的代码中在控制台中收到此错误：

invariant.js？4599：38 – Uncaught Invariant Violation：对象作为React子节点无效(找到：具有键{id,name,enabled,additionalInfo}的对象).如果您要渲染子集合,请使用数组,或使用React附加组件中的createFragment(object)包装对象.检查AccountTypeSelect的render方法.

我真的需要将每个对象转换为数组或使用createFragment将其包装起来使用它吗？这种情况的最佳做法是什么？

解决方法

而不是$.each使用map：

{AccountTypes.map(function(a) {
     return (
         <option key={a.id} val={a.id}>{a.name}</option>
     );
 })}