React - 当我的 React 钩子更新时，我的用户界面无法正确重新渲染

Question

I created a site that is bilingual - English and Spanish. In the navigation menu there are two buttons for the user to switch between the languages. By default, my site displays all of the text in English.

I'm using React hooks to update between the two languages. It's a lot of code so I'm only going to display the relevant parts.

Index.js
Inside of Index.js I have my React hook and useState is being implemented to call either the updateLanguageToEnglish or updateLanguageToSpanish functions depending on if the user pressed the English or Spanish button in the navigation menu.

    // Language database & state
        const english = languageDatabase.english;
        const spanish = languageDatabase.spanish;
        var [language, setLanguage] = useState(english);
        const updateLanguageToEnglish = () => setLanguage(english);
        const updateLanguageToSpanish = () => setLanguage(spanish);


 {/* Travel Information */}
            <TravelInformation
                title={language.travelInformationTitle}
                airport={language.travelInformationAirport}
                passport={language.travelInformationPassport}
                exchange={language.travelInformationExchange} />

NavigationBar.js

const NavigationBar = (props) => {

    const menuBars = <FontAwesomeIcon icon={faBars} />

    return (
        <Navbar collapseOnSelect fixed="top" expand="xl" variant="dark" className="animate__animated animate__fadeInDown animate__delay-1s langWrap">
            <Navbar.Toggle aria-controls="responsive-navbar-nav">
                <span className="fa-bars">{menuBars}</span>
                <span>MENU</span>
            </Navbar.Toggle>
            <Navbar.Collapse id="responsive-navbar-nav">
                <Nav className="m-auto">
                    <Nav.Link href="#rsvp">RSVP</Nav.Link>
                    <Nav.Link href="#ceremony">{props.ceremony}</Nav.Link>
                    <Nav.Link href="#venue">{props.venue}</Nav.Link>
                    <Nav.Link href="#hotels">{props.hotels}</Nav.Link>
                    <Nav.Link href="#travel-information">{props.travelInformation}</Nav.Link>
                    <Nav.Link href="#faqs">{props.faq}</Nav.Link>
                    <Navbar.Text id="nav-divider">|</Navbar.Text>
                    <div className="dropdown-divider"></div>
                    <Nav.Link onClick={props.updateLanguageToEnglish} href="javascript:void(0)">English</Nav.Link>
                    <Nav.Link onClick={props.updateLanguageToSpanish} href="javascript:void(0)">Español</Nav.Link>
                </Nav>
            </Navbar.Collapse>
        </Navbar>
    )
}
export default NavigationBar

languageDatabase.js
languageDatabase.js is just an object with 2 more objects inside of it, one for the English text and the second for the Spanish text.

import * as React from 'react';

const DOS_website_english = <a href="https://travel.state.gov/content/travel/en/passports.html" target="_blank" rel="noopener noreferrer">website</a>
const DOS_website_espanol = <a href="https://travel.state.gov/content/travel/en/passports.html" target="_blank" rel="noopener noreferrer">sitio web</a>
const exchange_english = <a href="https://www.xe.com/currencyconverter/convert/?Amount=1&From=USD&To=MXN" target="_blank" rel="noopener noreferrer">exchange rate</a>
const exchange_spanish = <a href="https://www.xe.com/currencyconverter/convert/?Amount=1&From=USD&To=MXN" target="_blank" rel="noopener noreferrer">tipo de cambio</a>

const data = {
    "english": {
        //NavBar
        "navCeremony": "Ceremony",
        "navReception": "Reception",
            "navVenue": "Venue",
            "navThingsToDo": "Things to do in Morelia",
        "navHotels": "Hotels",
        "navTravelInformation": "Travel Information",
        "navFAQ": "FAQs",

        //Travel Information
        "travelInformationTitle": "Travel Information",
        "travelInformationAirport": "General Francisco Mujica International Airport",
        "travelInformationPassport": <>In order to travel to Mexico, you will need a valid U.S. passport. If you do not have one or if it has expired, please take the necessary steps to obtain or renew your passport. Please visit the U.S. Department of State's {DOS_website_english} for more information.</>,
        "travelInformationExchange": <>The currency in Mexico is the Peso and the {exchange_english} is usually around $20 MXN for $1 USD.</>,
    },
    "spanish": {
        //NavBar
        "navCeremony": "Ceremonia",
        "navReception": "Recepción",
            "navVenue": "El Lugar",
            "navThingsToDo": "Qué hacer en Morelia",
        "navHotels": "Hoteles",
        "navTravelInformation": "Información Para Viajar",
        "navFAQ": "Preguntas Frecuentes",

        //Travel Information
        "travelInformationTitle": "Información Para Viajar",
        "travelInformationAirport": "Aeropuerto Internacional General Francisco Mujica",
        "travelInformationPassport": <>Para ciudadanos de Estados Unidos y poder viajar a México es necesario un Pasaporte Estadounidense. Tendrá que obtener uno y tomar las medidas necesarias para obtenerlo o renovarlo. Por favor visite el {DOS_website_espanol} del Departamento de Estado de EE. UU. para más información.</>,
        "travelInformationExchange": <>La moneda en México es el peso y el {exchange_spanish} es generalmente alrededor de $20 MXD por $1 USD.</>,
    }
}

export default data;

The problem I'm having is that there are parts of my site that don't re-render properly when switching between the languages. I'm attaching an image to show as an example. Another issue is that the text will re-render but it'll be a mix of English and Spanish and the text just looks distorted.
This is only happening in certain sections of the page and weirdly enough only on my phone and iPad. It works perfectly fine on Desktop.

I feel like my code is straightforward and I'm not understanding why the text updates properly on most of the site but not in 2-3 sections. Any help or guidance would be greatly appreciated.

Answer 1

Because you need to always ensure entire DOM tree is re-rendered when the language is updated, I would suggest to add "key" prop to the TravelInformation component.

Like -

<TravelInformation
    key="english"
    title={language.travelInformationTitle}
    airport={language.travelInformationAirport}
    passport={language.travelInformationPassport}
    exchange={language.travelInformationExchange}
/>

You can either specify key = english or spanish.

This can be part of your languageDatabase.js, like -

const data = {
    "english": {
        "key": "english-lang",
        //NavBar
        "navCeremony": "Ceremony",
        "navReception": "Reception",
            "navVenue": "Venue",
            "navThingsToDo": "Things to do in Morelia",
        "navHotels": "Hotels",
        "navTravelInformation": "Travel Information",
        "navFAQ": "FAQs",

        //Travel Information
        "travelInformationTitle": "Travel Information",
        "travelInformationAirport": "General Francisco Mujica International Airport",
        "travelInformationPassport": <>In order to travel to Mexico, you will need a valid U.S. passport. If you do not have one or if it has expired, please take the necessary steps to obtain or renew your passport. Please visit the U.S. Department of State's {DOS_website_english} for more information.</>,
        "travelInformationExchange": <>The currency in Mexico is the Peso and the {exchange_english} is usually around $20 MXN for $1 USD.</>,
    },
    "spanish": {
        "key": "spanish-lang",
        //NavBar
        "navCeremony": "Ceremonia",
        "navReception": "Recepción",
            "navVenue": "El Lugar",
            "navThingsToDo": "Qué hacer en Morelia",
        "navHotels": "Hoteles",
        "navTravelInformation": "Información Para Viajar",
        "navFAQ": "Preguntas Frecuentes",

        //Travel Information
        "travelInformationTitle": "Información Para Viajar",
        "travelInformationAirport": "Aeropuerto Internacional General Francisco Mujica",
        "travelInformationPassport": <>Para ciudadanos de Estados Unidos y poder viajar a México es necesario un Pasaporte Estadounidense. Tendrá que obtener uno y tomar las medidas necesarias para obtenerlo o renovarlo. Por favor visite el {DOS_website_espanol} del Departamento de Estado de EE. UU. para más información.</>,
        "travelInformationExchange": <>La moneda en México es el peso y el {exchange_spanish} es generalmente alrededor de $20 MXD por $1 USD.</>,
    }
}

And then you can update your code like -

<TravelInformation
    key={language.key}
    title={language.travelInformationTitle}
    airport={language.travelInformationAirport}
    passport={language.travelInformationPassport}
    exchange={language.travelInformationExchange}
/>