Блог

У меня вышеприведенное сообщение об ошибке, и я не уверен, по какой причине это произошло. В приведенном ниже фрагменте кода я извлекаю некоторые данные из файла с именем Data.js находится в моей корневой папке. Когда я запускаю свое приложение, я получаю упомянутое сообщение об ошибке, но при использовании тех же данных без импорта для внешнего файла оно работает отлично. что не имеет особого смысла, может кто-нибудь сказать мне, что я делаю неправильно, пожалуйста? Заранее спасибо. Services.js

 import { FaCircle, FaShoppingCart, FaLaptop, FaLock } from 'react-icons/fa'
import  { serviceLinks } from '../../../Data'

const data = serviceLinks;
console.log(data);
// const serviceLinks = [
    
//     {
//         title:'Haircut',
//         text:'All dependencies are kept current to keep things fresh.'
       
//     },
//     {
//         title:'Barberos',
//         text:'You can use this design as is, or you can make changes!'
        
//     },
//     {
//         title:'Color',
//         text:'Is it really open source if its not made with love?'
        
//     }, 
// ]

const icons = [
    FaShoppingCart, FaLaptop, FaLock
    
]
function Services () {
    
    return (
        <section className="page-section" id="services">
            <div className="container">
                <div className="text-center">
                    <h2 className="section-heading text-uppercase">Services</h2>
                    <h3 className="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
                </div>
                <div className="row text-center">
                    { data.map((service,idx) => {
                        const Icon = icons[idx];
                        console.log(Icon)
                        return (
                            <div className="col-md-4" key={idx}>                        
                            <span className="fa-stack fa-4x">
                                <FaCircle className="svg-inline--fa fa-circle w-16 fa-stack-2x text-dark" height={100} width={100} />
                                <Icon className="svg-inline--fa fa-shopping-cart fa-w-18 fa-stack-1x fa-inverse" fill="white" />
                            
                            </span>
                            <h4 className="my-3">{service.title}</h4>
                            <p className="text-muted">{service.text}</p>
                        </div>
                        )
                    })
                  
                    }
                </div> 
            </div>
        </section>
    )
}
export default Services;
 

data.js

  const galleryLinks = [
    {
        title:'HairStyle',
        haircutName:'Afro',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_afro.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_afro.jpg",
    },
     {
        title:'Hairstyle',
        haircutName:'Blondo',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_blondo.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_blondo.jpg",
    },
    {
        title:'Hairstyle',
        haircutName:'Chica',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbers_chica.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbers_chica.jpg",
    },
    {
        title:'Hairstyle',
        haircutName:'Nino',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_nino.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_nino.jpg",
    },
    {
        title:'HairStyle',
        haircutName:'Wavy',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_wavy.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_wavy.jpg",
    },
    {
        title:'HairStyle',
        haircutName:'Blondo2',
        imgUrl:"assets/img/portfolio/fullsize/dr.cut_thebarbershow_blondo2.jpg",
        imgUrl2:"assets/img/portfolio/thumbnails/dr.cut_thebarbershow_blondo2.jpg",
    },   
    
]

  const serviceLinks = [
    {
        title:'study our themes',
        text:'Our themes are updated regularly to keep them bug free!',
        icons:"assets/img/logo/Hnet.com-image.svg",
    },
    {
        title:'Haircut',
        text:'All dependencies are kept current to keep things fresh.',
        icons:"assets/img/logo/clipper.svg",
    },
    {
        title:'Barberos',
        text:'You can use this design as is, or you can make changes!',
        icons:"assets/img/logo/barber_chair.svg",
    },
    {
        title:'Color',
        text:'Is it really open source if its not made with love?',
        icons:"assets/img/logo/hairstyle.svg",
    }, 
]

export { galleryLinks,  serviceLinks};
 

index.js

 import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.scss'
import Header from './src/components/Header'
import Services from './src/components/Services'

export default function Home() {
  return (
    <div className="container-fluid">
      <Head>
        <title>Dr Cut TheBarber Show</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="main">
       <Header />
       <Services />
      </main>

      <footer className="footer text-center">
        <a
          className="text-decoration-none text-dark"
          href="https://vercel.com?utm_source=create-next-appamp;utm_medium=default-templateamp;utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
      </div>
    
  )
}
 

Это не имеет ничего общего с тем, как вы импортируете Data.js

Вот источник ошибки:

 const icons = [FaShoppingCart, FaLaptop, FaLock];
 

 {data.map((service, idx) => {
            const Icon = icons[idx];
 

У вас в основном есть массив из 3 значков, но длина вашего массива serviceLinks равна 4 в вашем Data.js итак, в какой-то момент карты, которую вы делаете icons[3] , что возвращает undefined и вызывает ошибку.

Добавьте значок в свой массив значков, чтобы он соответствовал вашей последней служебной ссылке.

Рабочий CodeSandbox.