react-intl中formatMessage处理字符串数组翻译失效问题求助

问题根源 #

你的代码中，tableDataMapper处理roleNames时直接将整个数组传入formatMessage，但formatMessage的id参数需要单个字符串。当roleNames包含多个元素（数组）时，无法正确解析，导致翻译失效。

修复方案 #

修改tableDataMapper中roleNames的处理逻辑，遍历数组中的每个角色，逐个翻译后拼接：

tableDataMapper={(rows) => {
    return rows?.map((row: any) => {
        let translatedRoles = '';
        // 处理角色数组的翻译
        if (Array.isArray(row?.roleNames)) {
            translatedRoles = row.roleNames.map(role => {
                return formatMessage({ id: role });
            }).join(', '); // 用逗号分隔多个角色，可按需调整分隔符
        } else if (row?.roleNames) {
            // 单个角色的情况
            translatedRoles = formatMessage({ id: row.roleNames });
        }

        return {
            ...row,
            roleNames: translatedRoles
        };
    });
} }

额外说明 #

• 代码中用逗号分隔多个翻译后的角色，你可以根据界面需求替换为其他分隔符（如换行符\n、分号等）。
• 增加了空值判断，避免roleNames为undefined或空数组时出现报错。

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