Recibí este error al intentar importar datos del archivo JSON en el componente de la App a continuación:
TypeError no capturado: el inicio no está definido
import './App.css'; import PreNavbar from './Components/PreNavbar'; import Navbar from "./Components/Navbar.js"; import {BrowserRouter as Router} from "react-router-dom"; import Slider from "./Components/Slider.js"; import banner from "./data/data.json"; function App( ) { return ( <Router> <PreNavbar /> <Navbar /> <Slider start = {banner.start} /> </Router> ); } export default App;Aquí está el componente Slider:
import React from 'react'; import Carousel from 'react-bootstrap/Carousel'; const Slider = ({start}) => { return ( <Carousel> {start.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider; Si uso {} en la exportación de banner, así:
import {banner} from "./data/data.json";Me enfrento a este otro error:
ERROR en ./src/App.js
No debe importar la exportación nombrada 'banner'.'start' (importado como 'banner') desde el módulo de exportación predeterminado (solo la exportación predeterminada estará disponible pronto)
Intente pasar un valor predeterminado a su accesorio de start en el componente <Slider /> como:
import React from 'react' import Carousel from 'react-bootstrap/Carousel' const Slider = ({start = []}) => { return ( <Carousel> {start.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' key={item} src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider;O puede agregar un encadenamiento opcional como:
import React from 'react' import Carousel from 'react-bootstrap/Carousel' const Slider = ({start}) => { return ( <Carousel> {start?.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' key={item} src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider;O ambos:
import React from 'react' import Carousel from 'react-bootstrap/Carousel' const Slider = ({start = []}) => { return ( <Carousel> {start?.map((item, index) => ( <Carousel.Item> <img className='d-block w-100' key={item} src={item} alt="First slide" /> </Carousel.Item> ))} </Carousel> ) } export default Slider; Creo que este último es el mejor enfoque para resolver este problema. Esto puede estar sucediendo porque la aplicación todavía está cargando los datos del archivo JSON y cuando está montando el componente, y dado que espera que el accesorio de start se cargue desde el principio, en lugar de ser un valor undefined o null , genera un error.