如何在react-i18next的map循环中实现JSON静态数据字段的翻译？

方案1：无需修改现有JSON结构（仅适合项目顺序固定的场景） #

你可以直接在map的回调函数内调用t函数，动态拼接翻译key即可——map的执行逻辑本身就在组件内部，完全符合react-i18next的钩子使用规则，不需要把翻译逻辑写到JSON文件里。
修改后的组件核心代码如下：

const MyComponent = () => {
    const { t } = useTranslation();

    return (
        <div>
            {data.projects.map((project, index) => {
                // 索引从0开始，翻译key从1开始，所以index+1拼接key
                const translatedTitle = t(`projects.title${index + 1}`)
                return (
                    <Link to='/' key={index}>
                        <img
                            src={project.image}
                            alt={translatedTitle}
                        />
                        <p>{translatedTitle}</p>
                    </Link>
                );
            })}
        </div>
    );
};

注意：该方案依赖JSON中项目的顺序和翻译key的顺序完全对应，如果你后续会调整项目顺序、增删项目，会出现翻译错位问题，推荐用方案2。

方案2：高可维护性方案（推荐） #

通过给JSON中的每个项目绑定唯一的翻译key，彻底规避顺序依赖问题：

1. 先修改projectsData.json，给每个项目新增i18nKey字段，和翻译文件的key一一对应：

{
    "projects": [
        {
            "title": "projekt 1",
            "description": "to jest opis projektu 1",
            "id": "111",
            "image": "https://placedog.net/640/480/1",
            "i18nKey": "projects.title1"
        },
        {
            "title": "projekt 2",
            "description": "to jest opis projektu 2",
            "id": "222",
            "image": "https://placedog.net/640/480/2",
            "i18nKey": "projects.title2"
        },
        // 剩余项目同理添加对应i18nKey即可
    ]
}

2. 组件内直接取项目的i18nKey调用翻译即可：

const MyComponent = () => {
    const { t } = useTranslation();

    return (
        <div>
            {data.projects.map((project, index) => {
                const translatedTitle = t(project.i18nKey)
                return (
                    <Link to='/' key={project.id}>
                        <img
                            src={project.image}
                            alt={translatedTitle}
                        />
                        <p>{translatedTitle}</p>
                    </Link>
                );
            })}
        </div>
    );
};

额外优化：这里把map的key从index换成了项目本身的id，符合React最佳实践，避免列表重渲染出现异常。

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