react如何遍历并比较_如何使用React.js在JSX中遍历对象

So I have a React.js component, and I want to loop through an object I import to add HTML options to it. Here is what I tried, which is both ugly and does not work:

import React from 'react';

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

const AccountTypeSelect = (props) => {

return (

--Select--

{

$.each(AccountTypes, function(index) {

this.name

})

}

);

};

export default AccountTypeSelect;

I received this error in the console from the above code:

invariant.js?4599:38 - Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {id, name, enabled, additionalInfo}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of AccountTypeSelect.

Do I really need to convert each object into an array or wrap it with createFragment to use it? What is the best practice for this case?

解决方案

Instead of $.each use map:

{AccountTypes.map(function(a) {

return (

{a.name}

);

})}