我很确定我的问题是一个初学者问题,那里有很多答案。但实际上我没有找到具体的单词或类似的例子,这给了我一个解决方案。
我定义了这个对象( Country.js ):
const Country = {
albania:
{
'countryNo': 70,
'name':
{
de: 'Albanien',
en: 'Albania',
pl: 'Albania',
},
},
austria:
{
'countryNo': 38,
'name':
{
de: 'Österreich',
en: 'Austria',
pl: 'Austria',
},
},
belgium:
{
'countryNo': 2,
'name':
{
de: 'Belgien',
en: 'Belgium',
pl: 'Belgia',
},
},
bosniaAndHerzegovina:
{
'countryNo': 93,
'name':
{
de: 'Bosnien und Herzegowina',
en: 'Bosnia and Herzegovina',
pl: 'Bośnia i Hercegowina',
},
},
bulgaria:
{
'countryNo': 68,
'name':
{
de: 'Bulgarien',
en: 'Bulgaria',
pl: 'Bulgaria',
},
},
croatia:
{
'countryNo': 92,
'name':
{
de: 'Kroatien',
en: 'Croatia',
pl: 'Chorwacja',
},
},
czechRepublic:
{
'countryNo': 61,
'name':
{
de: 'Tschechische Republik',
en: 'Czech Republic',
pl: 'Czechy',
},
},
denmark:
{
'countryNo': 8,
'name':
{
de: 'Dänemark',
en: 'Denmark',
pl: 'Dania',
},
},
eire:
{
'countryNo': 7,
'name':
{
de: 'Irland',
en: 'Eire',
pl: 'Irlandia',
},
},
estonia:
{
'countryNo': 53,
'name':
{
de: 'Estland',
en: 'Estonia',
pl: 'Estonia',
},
},
finland:
{
'countryNo': 53,
'name':
{
de: 'Finnland',
en: 'Finland',
pl: 'Finlandia',
},
},
finland:
{
'countryNo': 32,
'name':
{
de: 'Finnland',
en: 'Finland',
pl: 'Finlandia',
},
},
france:
{
'countryNo': 1,
'name':
{
de: 'Frankreich',
en: 'France',
pl: 'Francja',
},
},
germany:
{
'countryNo': 4,
'name':
{
de: 'Deutschland',
en: 'Germany',
pl: 'Niemcy',
},
},
greatBritain:
{
'countryNo': 6,
'name':
{
de: 'Großbritannien',
en: 'Great Britain',
pl: 'Wielka Brytania',
},
},
greece:
{
'countryNo': 9,
'name':
{
de: 'Griechenland',
en: 'Greece',
pl: 'Grecja',
},
},
hungary:
{
'countryNo': 64,
'name':
{
de: 'Ungarn',
en: 'Hungary',
pl: 'Węgry',
},
},
iceland:
{
'countryNo': 24,
'name':
{
de: 'Island',
en: 'Iceland',
pl: 'Islandia',
},
},
india:
{
'countryNo': 664,
'name':
{
de: 'Indien',
en: 'India',
pl: 'Indie',
},
},
italy:
{
'countryNo': 5,
'name':
{
de: 'Italien',
en: 'Italy',
pl: 'Włochy',
},
},
kosovo:
{
'countryNo': 95,
'name':
{
de: 'Kosovo',
en: 'Kosovo',
pl: 'Kosowo',
},
},
latvia:
{
'countryNo': 54,
'name':
{
de: 'Lettland',
en: 'Latvia',
pl: 'Łotwa',
},
},
lithuania:
{
'countryNo': 55,
'name':
{
de: 'Litauen',
en: 'Lithuania',
pl: 'Lithania',
},
},
luxemburg:
{
'countryNo': 960,
'name':
{
de: 'Luxemburg',
en: 'Luxemburg',
pl: 'Luksemburg',
},
},
macedonia:
{
'countryNo': 96,
'name':
{
de: 'Mazedonien',
en: 'Macedonia',
pl: 'Macedonia',
},
},
moldova:
{
'countryNo': 74,
'name':
{
de: 'Republik Moldau',
en: 'Moldova',
pl: 'Mołdawia',
},
},
montenegro:
{
'countryNo': 97,
'name':
{
de: 'Montenegro',
en: 'Montenegro',
pl: 'Montenegro',
},
},
morocco:
{
'countryNo': 97,
'name':
{
de: 'Marokko',
en: 'Morocco',
pl: 'Maroko',
},
},
netherlands:
{
'countryNo': 3,
'name':
{
de: 'Niederlande',
en: 'Netherlands',
pl: 'Holandia',
},
},
norway:
{
'countryNo': 28,
'name':
{
de: 'Norwegen',
en: 'Norway',
pl: 'Norwegia',
},
},
poland:
{
'countryNo': 60,
'name':
{
de: 'Polen',
en: 'Poland',
pl: 'Polska',
},
},
portugal:
{
'countryNo': 10,
'name':
{
de: 'Portugal',
en: 'Portugal',
pl: 'Portugalia',
},
},
romania:
{
'countryNo': 66,
'name':
{
de: 'Rumänien',
en: 'Romania',
pl: 'Rumunia',
},
},
serbia:
{
'countryNo': 94,
'name':
{
de: 'Serbien',
en: 'Serbia',
pl: 'Serbia',
},
},
slovakia:
{
'countryNo': 63,
'name':
{
de: 'Slowakei',
en: 'Slovakia',
pl: 'Słowacja',
},
},
slovenia:
{
'countryNo': 91,
'name':
{
de: 'Slowenien',
en: 'Slovenia',
pl: 'Słowenia',
},
},
spain:
{
'countryNo': 11,
'name':
{
de: 'Spanien',
en: 'Spain',
pl: 'Hiszpania',
},
},
sweden:
{
'countryNo': 30,
'name':
{
de: 'Schweden',
en: 'Sweden',
pl: 'Szwecja',
},
},
switzerland:
{
'countryNo': 39,
'name':
{
de: 'Schweiz',
en: 'Switzerland',
pl: 'Szwajcaria',
},
},
tunisia:
{
'countryNo': 212,
'name':
{
de: 'Tunesien',
en: 'Tunisia',
pl: 'Tunezja',
},
},
turkey:
{
'countryNo': 52,
'name':
{
de: 'Türkei',
en: 'Turkey',
pl: 'Turcja',
},
},
}
export default Country;
现在我想迭代另一个组件中的所有条目:
...
import Country from './Country.js';
...
<div className="dropdown-menu" aria-labelledby="navbarDropdownCountry">
{
Object.Keys(Country).map((country) => {
return (
<a className="dropdown-item imageLink animated" href="#locations" onClick={(e) => this.handleClickCountry(e, country.name[en].toLowerCase())}>{country.name[this.props.currentLanguage].toUpperCase()}</a>
);
})
}
</div>
...
这给了我以下错误:
TypeError:Object.Keys不是函数
首先我尝试以这种方式迭代,但它也不起作用:
Country.map((country) => {
...
那怎么做对了? 感谢您的帮助,并再次抱歉这个初学者问题。
答案 0 :(得分:1)
您需要使用Object.keys(小k),请参阅here
Object.keys(Country).map((country) => {
return (
<a className="dropdown-item imageLink animated" href="#locations" onClick={(e) => this.handleClickCountry(e, country.name[en].toLowerCase())}>{country.name[this.props.currentLanguage].toUpperCase()}</a>
);
})
答案 1 :(得分:1)
请注意,javscript区分大小写。试试这样:
...
import Country from './Country.js';
...
<div className="dropdown-menu" aria-labelledby="navbarDropdownCountry">
{
Object.keys(Country).map((countryKey) => {
// you will get every key from Country object
const country = Country[countryKey];
return (
<a
className="dropdown-item imageLink animated"
href="#locations"
onClick={(e) =>
this.handleClickCountry(e,
country.name[en].toLowerCase())}
>
{country.name[this.props.currentLanguage].toUpperCase()}</a>
);
});
}
</div>