Tengo este problema extraño. Estoy tratando de codificar mi cartera en ReactJS y tengo una computadora de escritorio y una computadora portátil. Estoy subiendo mi código a mi repositorio de GitHub.
En mi escritorio, el código corre super bien y no me sale ningún mensaje de error, ahora si clono mi repositorio en mi notebook, en la consola no aparece ningún error pero en el navegador localhost:3000, sigo recibiendo esto error "No se puede leer la propiedad 'mapa' de indefinido" de cualquier parte del código que estoy mapeando.
import React, { useContext } from "react"; import { Container, Columns, Title } from "./ProjectPortfolioElements"; import Card from "../Projects/Card"; import desktopMockup from "../../assets/projects/modern-browser-mockup.png"; import dictionary from "../Dictionary/dictionary"; import { LanguageContext } from "../../App"; function ProjectPortfolio() { const [language] = useContext(LanguageContext); return ( <> {dictionary[language].map(({ project }) => ( <> <Title> <h1>{project}</h1> </Title> <Container> <Columns> <Card image={desktopMockup} title="Logistic Website" description="This website was fully done with ReactJS" /> </Columns> <Columns> <Card image={desktopMockup} title="Logistic Website" description="This website was fully done with ReactJS" /> </Columns> </Container>{" "} </> ))} </> ); } export default ProjectPortfolio;Realmente no tengo ni idea de lo que puede ser. La consola está bien, mi escritorio está bien y mi portátil no funciona.
defaultLanguage es "br" si no hay nada almacenado en el almacenamiento local. Sospecho que está alcanzando este valor predeterminado en la computadora portátil, ya que indicó que solo clonó el proyecto y es probable que no se ejecute para poder configurar un idioma en localStorage.
const defaultLanguage = "br"; // <-- default export const LanguageContext = React.createContext(); function App() { const [language, setLanguage] = useState(() => { const langFromLocalStorage = window.localStorage.getItem("lang"); return langFromLocalStorage ? langFromLocalStorage : defaultLanguage; // <-- default if nothing in localStorage }); React.useEffect(() => { window.localStorage.setItem("lang", language); }, [language]); return ( <div className="App"> <LanguageContext.Provider value={[language, setLanguage]}> <Main></Main> </LanguageContext.Provider> </div> ); } Sugiero cambiar defaultLanguage a uno de "en" , "ptbr" , "jp" o "ru" .
Y / o como protección adicional, use el operador de encadenamiento opcional en el valor del dictionary[language] en caso de que algún otro idioma esté almacenado de alguna manera en localStorage que no sea una clave en el diccionario.
dictionary?.[language]?.map(......)