如何使用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-未捕获的不变违规:对象作为React子对象无效(找到:具有键{id,name,enabled,additionalInfo}的对象)。如果您打算渲染孩子的集合,请使用数组代替,或者使用React附加组件中的createFragment(object)包装对象。检查的渲染方法AccountTypeSelect

我是否真的需要将每个对象转换为数组或将其与createFragment一起使用才能使用?这种情况下的最佳做法是什么?

凯文

代替$.each使用map

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章