reactjs - 使用 react-i18next 切换语言时列表项的奇怪行为

Question

• 我正在使用 react-i18next 在两种语言之间切换。
• json数据是一个对象数组
• 在这些对象中，还有另一个用于项目符号的数组。

"eduData": [
        {
            "id": 1,
            "education": "Some education 1",
            "timeframe": "2017 - 2018",
            "bulletpoints": ["A", "B", "C", "D"]
        },
        {
            "id": 2,
            "education": "Some education 2",
            "timeframe": "2016 - 2017",
            "bulletpoints": ["A", "B", "C"]
        },
        {
            "id": 3,
            "education": "Some education 3",
            "timeframe": "2015 - 2016",
            "bulletpoints": ["A", "B"]
        },
        {
            "id": 4,
            "education": "Some education 4",
            "timeframe": "2014 - 2015",
            "bulletpoints": ["A"]
        }
    ]

我正在使用 map() 循环遍历 eduData 和要点。但是无论何时切换语言，blulletpoints 中的列表项都不会被翻译，而只是添加。所以我看到了两种语言的列表项。

obj.education 和 obj.timeframe 被正确转换。只有列表项具有添加 li 的两种语言的这种奇怪行为。我认为这可能是要点的第二个 map() 的 bc，但我不确定。如何解决这个问题？

我像这样循环遍历它：

const data = t("eduData", { returnObjects: true });


{
    data.map((obj) => (
        <>
            <div>
                <h3>{obj.education}</h3>
                <h3>{obj.timeframe}</h3>
            </div>
            <div>
                <ul>
                    {obj.bulletpoints.map((item) => (
                        <li key={obj.id}>{item}</li>
                    ))}
                </ul>
            </div>
        </>
    ));
}

我的问题是：单击翻译按钮时如何防止列表项继续添加li？而是只翻译现有的 li。

标签： reactjsi18nextreact-i18next