如何基于countries-list包实现国家与语言的映射关联？

首先纠正思路：不需要额外通过国家名称转编码再查语言，countries里的每个国家对象本身就包含了对应的语言编码数组，直接用这个数组去匹配languages对象即可。

正确实现代码 #

import { countries, languages } from 'countries-list';

const countryItems = [];
const languageItems = [];

for (const country of Object.values(countries)) {
    // 生成国家下拉项
    countryItems.push(<Dropdown.Item>{country.name}</Dropdown.Item>);
    
    // 获取对应国家的语言名称列表
    const countryLanguageNames = country.languages.map(langCode => {
        // 用国家自带的语言编码匹配languages对象
        return languages[langCode]?.name || '未知语言';
    });
    
    // 生成语言下拉项（取第一个语言，也可拼接多个）
    languageItems.push(<Dropdown.Item>{countryLanguageNames[0]}</Dropdown.Item>);
}

关键说明 #

• countries中的每个国家对象自带languages属性，是语言的ISO 639-1编码数组，和languages对象的键完全匹配，无需额外转换国家编码。
• 加入?.可选链和默认值'未知语言'，避免部分国家无语言数据导致报错。
• 若需展示国家所有语言，可将countryLanguageNames用join(', ')拼接成字符串。

原方法失效原因 #

你用getCountryCode(c.name)拿到的是国家的ISO 3166-1编码（如CN），但languages对象的键是语言的ISO 639-1编码（如zh），两者属于不同编码体系，自然无法匹配。直接使用国家对象自带的languages数组才是正确的关联方式。

内容的提问来源于stack exchange，提问作者user1960836