所以我有一个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>
);
})}