Todavía estoy entendiendo los ganchos de React y estoy tratando de usar useMemo condicionalmente en función de diferentes factores.
Mi parte useMemo se ve así
const headers = React.useMemo( () => [ { Header: "Name", accessor: "name", Cell: AvatarCell, emailAccessor: "email", }, { Header: "Country", accessor: "country", Filter: SelectColumnFilter, filter: "equals", Cell: Country, }, { Header: "Address", accessor: "address", Cell: Address, }, ], [] ); Sin embargo, me gustaría cambiar los headers según el idioma seleccionado, así que traté de usar una declaración `if pero esto no funcionó
if (language === 'en') { const columns = React.useMemo( () => [ { Header: "Name", accessor: "name", Cell: AvatarCell, emailAccessor: "email", }, { Header: "Country", accessor: "country", Filter: SelectColumnFilter, filter: "equals", Cell: Country, }, { Header: "Address", accessor: "address", Cell: Address, }, ], [] ); } if (language === 'de') { const columns = React.useMemo( () => [ { Header: "Name", accessor: "name", Cell: AvatarCell, emailAccessor: "email", }, { Header: "Land", accessor: "country", Filter: SelectColumnFilter, filter: "equals", Cell: Country, }, { Header: "Adresse", accessor: "address", Cell: Address, }, ], [] ); } but it fails to compile and I get a message saying that I called the react hook conditionally. How can I use one or the other useMemo based on the value of `language` Thanks in advancePara hacer esto, debe tener la lógica if else dentro del enlace useMemo. Y luego querrá agregar la variable a la que se aplica la lógica como una dependencia. A continuación, se puede ver un ejemplo simple en el que se cambia el primer encabezado cuando el idioma es de.
Lo que está pasando al gancho useMemo es solo una función, lo que significa que puede tener una lógica MUY compleja dentro de él. No necesita limitarse a devolver algunas constantes y variables predefinidas
const columns = React.useMemo( () => [ { Header: language==="de"?"de-name":"Name", accessor: "name", Cell: AvatarCell, emailAccessor: "email", }, { Header: "Country", accessor: "country", Filter: SelectColumnFilter, filter: "equals", Cell: Country, }, { Header: "Address", accessor: "address", Cell: Address, }, ], [language] );Ponga la lógica dentro de la función interna useMemo: use una sola función para todos los idiomas. Agregue language a la segunda matriz de parámetros (para que cuando cambie el idioma, se vuelva a calcular el resultado).
por ejemplo:
const columns = React.useMemo(() => { if (language === 'en') { return [ { Header: "Name", accessor: "name", Cell: AvatarCell, emailAccessor: "email", }, { Header: "Country", accessor: "country", Filter: SelectColumnFilter, filter: "equals", Cell: Country, }, { Header: "Address", accessor: "address", Cell: Address, }, ]; } else if (language === 'de') { return [ { Header: "Name", accessor: "name", Cell: AvatarCell, emailAccessor: "email", }, { Header: "Land", accessor: "country", Filter: SelectColumnFilter, filter: "equals", Cell: Country, }, { Header: "Adresse", accessor: "address", Cell: Address, }, ]; } }, [language]);