ReactJS中如何根据用户选择的语言对数组进行排序？

你的问题核心是排序时用的是原始英文国家名，而非翻译后的文本，所以不管切换到哪种语言，都会按英文规则排序。以下是具体修复方案：

关键修复点 #

• 排序依据改为翻译后的国家名称，而非原始的name字段
• 避免直接修改原状态数组（sort是原地排序，会污染原数据）
• 优化语言切换的触发逻辑，确保排序时机正确

修改后的代码 #

class Example extends React.Component {
    
    constructor(props) {
        super(props);
        this.state = {
            locations: [
                { "id": 2, "name": "Åland Islands", "code": "AX" },
                { "id": 1, "name": "Afghanistan", "code": "AF" },
                { "id": 3, "name": "Albania", "code": "AL" },
                { "id": 39, "name": "Burkina Faso", "code": "BF" },
                { "id": 43, "name": "Canada", "code": "CA" },
                { "id": 220, "name": "Switzerland", "code": "CH" },
                { "id": 234, "name": "Turks and Caicos Islands", "code": "TC" },
                { "id": 242, "name": "Uzbekistan", "code": "UZ" },
                { "id": 243, "name": "Vanuatu", "code": "VU" },
                { "id": 246, "name": "Wallis and Futuna", "code": "WF" },
                { "id": 247, "name": "Western Sahara", "code": "EH" },
                { "id": 248, "name": "Yemen", "code": "YE" },
                { "id": 250, "name": "Zimbabwe", "code": "ZW" }
            ],
        };
    }

    sortCountryList = () => {
        // 直接从react-i18next的props获取当前语言，比读localStorage更可靠
        const selectedLang = this.props.i18n.language;
        // 复制原数组，避免原地修改状态
        const sortedLocations = [...this.state.locations].sort((a, b) => {
            // 使用翻译后的名称进行排序
            const nameA = this.props.t(a.name);
            const nameB = this.props.t(b.name);
            return new Intl.Collator(selectedLang, { sensitivity: "base" }).compare(nameA, nameB);
        });

        this.setState({ locations: sortedLocations });
    }

    render() {
        return (
            <ul>
                {this.state.locations.map((location) => (
                    <li key={location.id}>
                        {this.props.t(location.name)}
                    </li>
                ))}
            </ul>
        );
    }

    componentDidUpdate(prevProps) {
        // 监听语言变化，而非t函数引用变化
        if (this.props.i18n.language !== prevProps.i18n.language) {
            this.sortCountryList();
        }
    }

    componentDidMount() {
        // 组件初始化时执行一次排序
        this.sortCountryList();
    }
}

// 确保组件通过withNamespaces包装，获取i18n实例和t函数
export default withNamespaces()(Example);

额外说明 #

• 确保翻译文件（如en.json、de.json等）包含所有国家名称的对应翻译，否则会回退到原始英文，导致排序无效
• [...this.state.locations]用于复制数组，符合React状态不可变的设计原则
• 部分非拉丁语系语言（如阿拉伯语）的排序需要环境支持对应的Intl规则，现代浏览器和Node.js一般已兼容

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