如何使用 React.js 遍历 JSX 中的对象

Question

所以我有一个 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 包装它才能使用吗？这种情况的最佳做法是什么？

原文由 kibowki 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

而不是 $.each 使用 map ：

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

原文由 Kevin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

注意事项：

您的数据在 Object 中，而不是在数组中：因此要遍历它，您必须使用 Object.keys(yourObject).map() 而不是 yourObject.map()

考虑到这一点；这是解决方案

var user = {
     fname:'John',
     lname : 'Doe',
     email:'[e-mail]'
}

class App extends Component {
  render() {
    return (
      <p>
      <ul>
        {
          Object.keys(user).map((oneKey,i)=>{
            return (
                <li key={i}>{user[oneKey]}</li>
              )
          })
        }

      </ul>
      </p>
    );
  }
}

原文由 Daggie Blanqx - Douglas Mwangi 发布，翻译遵循 CC BY-SA 4.0 许可协议