اذهب إلى المحتوى
  • 0

معالجة خطأ عند جلب البيانات من ملف خارجي في react js

محمود_سعداوي

السؤال

السلام عليكم

الفايل التالي يمثل جملة من البيانات الخاصة ببعض المنتجات التي سأقوم بجلبها لاحقا

import {hp1} from '../images/hp-1.png'
import {asus1} from '../images/asus-1.png'
import {asus2} from '../images/asus-3.png'
import {dell1} from '../images/dell-1.png'
import {dell2} from '../images/dell-2.png'
import {dell3} from '../images/dell-3.png'
import {hp2} from '../images/hp-2.png'
import {hp3} from '../images/hp-3.png'
import {lenovo1} from '../images/lenovo-1.png'
import {lenovo2} from '../images/lenovo-2.png'
import {lenovo3} from '../images/lenovo-3.png'
import {toshiba1} from '../images/toshiba-1.png'
import {toshiba2} from '../images/toshiba-2.png'
import {toshiba3} from '../images/toshiba-3.png'
import {product1} from '../images/product-1.png'
import {product2} from '../images/product-2.png'
import {product3} from '../images/product-3.png'
import {product4} from '../images/product-4.png'
import {product5} from '../images/product-5.png'
import {product6} from '../images/product-6.png'
import {product7} from '../images/product-7.png'
import {product8} from '../images/product-8.png'

let data = [
    {
        id:1,
        img: hp1,
        title:'Hp one',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 900,
        category:'HP',
        rate:4
    },
    {
        id: 2,
        title: "Google Pixel - Black",
        img: product1,
        price: 810,
        category: "GOOGLE1",
        des:   "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        rate: 4.25
    },
    {
        id: 3,
        title: "Samsung S7",
        img: product2,
        price: 1699,
        company: "SAMSUNG",
        des:"Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        total: 4.80
    },
    {
        id: 4,
        img: dell1,
        title: 'Dell one',
        des: 'screen 15.6" FHD - processor Intel i7-1165G7',
        price: 899,
        category: 'DELL',
        rate: 3.10
    },
    {
        id: 5,
        img: dell2,
        title: dell2,
        des: 'screen 15.6" FHD - processor Intel i7-1065G7 ',
        price: '800',
        category: 'DELL',
        rate: 4.75
    },
    {
        id: 6,
        img: dell3,
        title: 'Dell three',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1699,
        category:'DELL',
        rate:4.55
    },
    {
        id: 7,
        img: asus1,
        title: 'Asus one',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 700,
        category: 'ASUS',
        rate: 4.5
    },
    {
        id: 8,
        title: "HTC 10 - White",
        img: product3,
        price: 1080,
        category: "htc",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        rate: 3.84
    },
    {
        id: 9,
        title: "HTC Desire 626s",
        img: product4,
        price: 1024,
        category: "htc",
        des:"Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub, echo park actually green juice sriracha paleo. Brooklyn sriracha semiotics, DIY coloring book mixtape craft beer sartorial hella blue bottle. Tote bag wolf authentic try-hard put a bird on it mumblecore. Unicorn lumbersexual master cleanse blog hella VHS, vaporware sartorial church-key cardigan single-origin coffee lo-fi organic asymmetrical. Taxidermy semiotics celiac stumptown scenester normcore, ethical helvetica photo booth gentrify.",
        rate: 3.98
    },
    {
        id: 10,
        img:asus2,
        title:'Asus two',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price:979,
        category:'ASUS',
        rate:3.75
    },
    {
        id:11,
        img:hp2,
        title:'Hp two',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price:699,
        category:'HP',
        rate:4.42
    },
    {
        id: 12,
        title: "HTC 10 - Black",
        img: product5,
        price: 899,
        company: "htc",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 4.10
    },
    {
        id: 13,
        img: hp3,
        title: 'Hp three',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1245,
        category:'HP',
        rate:4.35
    },
    {
        id: 14,
        img:lenovo1,
        title:'Lenovo one',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 999,
        category:'LENOVO',
        rate:4.15
    },
    {
        id: 15,
        img: lenovo2,
        title: 'Lenovo two',
        des: 'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 987,
        category:'LENOVO',
        rate:3.92
    },
    {
        id: 16,
        title: "Vintage Iphone",
        img: product6,
        price: 1017,
        company: "apple",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 2.88
    },
    {
        id: 17,
        title: "Iphone 7",
        img: product7,
        price: 30,
        company: "apple",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 3.99
    },
    {
        id: 18,
        img:lenovo3,
        title:'lenovo three',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 815,
        category:'LENOVO',
        rate:3.10
    },
    {
        id:19,
        img: toshiba1,
        title:'Toshiba one',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1005,
        category:'TOSHIBA',
        rate:4.82
    },
    {
        id:20,
        img: toshiba2,
        title:'Toshiba two',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 989,
        category:'TOSHIBA',
        rate:4.21
    },
    {
        id: 21,
        img: toshiba3,
        title:'Toshiba three',
        des:'screen 15.6" FHD - processor Intel i7-1065G7',
        price: 1299,
        category:'TOSHIBA',
        rate:3.75
    },
    {
        id: 22,
        title: "Smashed Iphone",
        img: product8,
        price: 1229,
        company: "apple",
        des: "Lorem ipsum dolor amet offal butcher quinoa sustainable gastropub.",
        rate: 4.5
    }
]

export default data

في السطر الأول مثلا  المتغير hp1 يمثل رابط الصورة للمنتج.

عندما أقوم بجلب الصورة في ملف آخر بالطريقة التالية

import {data} from '../data'

function Header() {

  return (
    
    <img src={data[0].img} className="card-img-top" alt="..."/>
    
      )
}

export default Header

تظهر رسالة الخطأ التالية

ERROR in ./src/components/Header/Header.js 31:13-24
 

export 'data' (imported as 'data') was not found in '../data' (possible exports: default)


 

ERROR in ./src/components/data.js 36:7-15
 

Can't import the named export 'product1' (imported as 'product1') from default-exporting module (only default export is available)


 

ERROR in ./src/components/data.js 44:7-15
 

Can't import the named export 'product2' (imported as 'product2') from default-exporting module (only default export is available)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

تفضّل ملف الsrc 

src.zip

الخطأ في عملية الاستيراد للبيانات، لاحظ :

// الكود الخاص بك
import { hp1 } from './../images/hp-1.png'
import { asus1 } from '../images/asus-1.png'
import { asus2 } from '../images/asus-3.png'
import { dell1 } from '../images/dell-1.png'
import { dell2 } from '../images/dell-2.png'
import { dell3 } from '../images/dell-3.png'
import { hp2 } from '../images/hp-2.png'
import { hp3 } from '../images/hp-3.png'
import { lenovo1 } from '../images/lenovo-1.png'
import { lenovo2 } from '../images/lenovo-2.png'
import { lenovo3 } from '../images/lenovo-3.png'
import { toshiba1 } from '../images/toshiba-1.png'
import { toshiba2 } from '../images/toshiba-2.png'
import { toshiba3 } from '../images/toshiba-3.png'
import { product1 } from '../images/product-1.png'
import { product2 } from '../images/product-2.png'
import { product3 } from '../images/product-3.png'
import { product4 } from '../images/product-4.png'
import { product5 } from '../images/product-5.png'
import { product6 } from '../images/product-6.png'
import { product7 } from '../images/product-7.png'
import { product8 } from '../images/product-8.png'

// الشكل الصحيح هو 
import hp1 from './../images/hp-1.png'
import asus1 from '../images/asus-1.png'
import asus2 from '../images/asus-3.png'
import dell1 from '../images/dell-1.png'
import dell2 from '../images/dell-2.png'
import dell3 from '../images/dell-3.png'
import hp2 from '../images/hp-2.png'
import hp3 from '../images/hp-3.png'
import lenovo1 from '../images/lenovo-1.png'
import lenovo2 from '../images/lenovo-2.png'
import lenovo3 from '../images/lenovo-3.png'
import toshiba1 from '../images/toshiba-1.png'
import toshiba2 from '../images/toshiba-2.png'
import toshiba3 from '../images/toshiba-3.png'
import product1 from '../images/product-1.png'
import product2 from '../images/product-2.png'
import product3 from '../images/product-3.png'
import product4 from '../images/product-4.png'
import product5 from '../images/product-5.png'
import product6 from '../images/product-6.png'
import product7 from '../images/product-7.png'
import product8 from '../images/product-8.png'

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

استدعي البيانات بالشكل 

import data from '../data'

بدون الأقواس {} 

وذلك لانك قمت بتصدير الـ data كـ default في الملف data.js.

اعرف اكثر عن الـ export والـ import من موسوعة حسوب

 

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يحدث هذا لأنك تحاول استعمال تضمين وحدة نمطية مصدرة تصديرا معنونا (named export) في حين أنك تقوم بتصدير وحدة data كوحدة افتراضية. ما تحتاج القيام به هو اما:

  • اعادة تصدير الوحدة data بشكل معنون فيكون: 
    // data.js 
    
    export const data = {
         // you data object
    }

     

  • او استيراد وحدة data بشكل افتراضي فيكون: 
    import data from './data.js'

    تعرف عن الوحدات في Typescript

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 3 دقائق مضت قال عمر قره محمد:

استدعي البيانات بالشكل 


import data from '../data'

بدون الأقواس {} 

حيث انك قمت بتصدير الـ data كـ default.

 

 

ظهرت رسالة الخطأ التالية

ERROR in ./src/components/data.js 27:7-10
 

Can't import the named export 'hp1' (imported as 'hp1') from default-exporting module (only default export is available)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

ظهرت رسالة الخطأ التالية

ERROR in ./src/components/data.js 27:7-10
 

Can't import the named export 'hp1' (imported as 'hp1') from default-exporting module (only default export is available)

هذه مشكلة مختلفة،

هل يمكنك مشاركة ملفات المشروع بالكامل حتى استطيع الاطلاع على سبب المشكلة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 2 دقائق مضت قال عمر قره محمد:

هذه مشكلة مختلفة،

هل يمكنك مشاركة ملفات المشروع بالكامل حتى استطيع الاطلاع على سبب المشكلة.

تفضّل ملف الsrc 

src.zip

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 6 دقائق مضت قال عمر قره محمد:

الخطأ في عملية الاستيراد للبيانات، لاحظ :


// الكود الخاص بك
import { hp1 } from './../images/hp-1.png'
import { asus1 } from '../images/asus-1.png'
import { asus2 } from '../images/asus-3.png'
import { dell1 } from '../images/dell-1.png'
import { dell2 } from '../images/dell-2.png'
import { dell3 } from '../images/dell-3.png'
import { hp2 } from '../images/hp-2.png'
import { hp3 } from '../images/hp-3.png'
import { lenovo1 } from '../images/lenovo-1.png'
import { lenovo2 } from '../images/lenovo-2.png'
import { lenovo3 } from '../images/lenovo-3.png'
import { toshiba1 } from '../images/toshiba-1.png'
import { toshiba2 } from '../images/toshiba-2.png'
import { toshiba3 } from '../images/toshiba-3.png'
import { product1 } from '../images/product-1.png'
import { product2 } from '../images/product-2.png'
import { product3 } from '../images/product-3.png'
import { product4 } from '../images/product-4.png'
import { product5 } from '../images/product-5.png'
import { product6 } from '../images/product-6.png'
import { product7 } from '../images/product-7.png'
import { product8 } from '../images/product-8.png'

// الشكل الصحيح هو 
import hp1 from './../images/hp-1.png'
import asus1 from '../images/asus-1.png'
import asus2 from '../images/asus-3.png'
import dell1 from '../images/dell-1.png'
import dell2 from '../images/dell-2.png'
import dell3 from '../images/dell-3.png'
import hp2 from '../images/hp-2.png'
import hp3 from '../images/hp-3.png'
import lenovo1 from '../images/lenovo-1.png'
import lenovo2 from '../images/lenovo-2.png'
import lenovo3 from '../images/lenovo-3.png'
import toshiba1 from '../images/toshiba-1.png'
import toshiba2 from '../images/toshiba-2.png'
import toshiba3 from '../images/toshiba-3.png'
import product1 from '../images/product-1.png'
import product2 from '../images/product-2.png'
import product3 from '../images/product-3.png'
import product4 from '../images/product-4.png'
import product5 from '../images/product-5.png'
import product6 from '../images/product-6.png'
import product7 from '../images/product-7.png'
import product8 from '../images/product-8.png'

 

متى نستمل المعقفات و متى لا.

شكرا جزيلا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ منذ ساعة مضت قال محمود سعداوي:

متى نستمل المعقفات و متى لا.

شكرا جزيلا

لقد اشرت لك في الرد الأول إلى توثيق موسوعة حسوب حول الاستيراد التصدير.

ولكن باختصار، فإنه هنالك نوعين من التصدير وهما الـ export default و الـ export بدون default.

فإذا كان التصدير باستخدام الـ export default تقوم بالاستيراد بدون المعقوفات وإذا كان باستخدام الـ export فقط عندها تقوم باستخدام المعقوفات.

والـ export default تصدر متغير واحد فقط بينما الـ export تستطيع تصدير عدد غير محدود من المتغيرات.

// إذا صدرت المتغير بالشكل
export default example
// تستورده بالشكل 
import example from "./example"

// إذا صدرت المتغير بالشكل 
export example1;
export example2;
export example3;
// تستورده بالشكل 
import {example1 , example2 , example3} from "./example"

// وكذلك تستطيع تصديرالنوعين معاً
export default example
export example1;
// والاستيراد يكون 
import example,{example1} from "./example"

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...