React Typescript:遍历国家/地区列表以创建选择输入

Question

我有一个国家列表，其中的ISO代码保存在country.tsx...

// countries.tsx
export const COUNTRIES: { [x: string]: { [y: string]: string } } = {
en: {
AX: 'Aaland Islands',
AF: 'Afghanistan',
AL: 'Albania',
DZ: 'Algeria',
AS: 'American Samoa',
AD: 'Andorra',
},
};

然后我导入上述国家并从全球获取用户的语言

import { COUNTRIES } from '../../translations/countries';
const languages = COUNTRIES[global.language];

然后，如何遍历国家/地区以构建选择框？

<select name='country' value={country} onChange={onChange}>
<option value=''>Select...</option>
<option value='AX'>Aaland Islands</option>
<option value='AF'>Afghanistan</option>
<option value='AL'>Albania</option>
<option value='DZ'>Algeria</option>
...

Answer 1

这样的东西应该可以解决问题

const COUNTRIES: { [x: string]: { [y: string]: string } } = {
en: {
AX: 'Aaland Islands',
AF: 'Afghanistan',
AL: 'Albania',
DZ: 'Algeria',
AS: 'American Samoa',
AD: 'Andorra',
},
};
const languages = COUNTRIES[global.language];
<select name='country' value={country} onChange={onChange}>
<option key="" value="">Select...</option>
{
Object
.entries(languages)
.map(([ key, display ]) => (
<option key={key} value={key}>{display}</option>
))
}
</select>

Object.entries(( 允许您将键和值作为数组数组获取，然后您只需使用映射来迭代数组