fehlgeschlagen ein Modul in reactjs importieren

Question

I reactjs und es6 verwende ich wie folgt definiert eine Javascript.

In einer anderen Javasript-Datei möchte ich diese Datei importieren, also habe ich unten Code verwendet. Aber ich habe immer VENDOR_LIST ist undefined Fehler in ComponentDidMount() -Methode. Was ist falsch an meinem Code?

import VENDOR_LIST from '../data/vendor' 

    export class VendorList extends React.Component{ 

    selectChanged(e){ 
    console.log('select changed ', e); 
    } 

    componentDidMount(){ 
    console.log('load vendor list data ',VENDOR_LIST); 
    } 

    render(){ 
    return (
     <select onChange={this.selectChanged}> 
     <option value="A">A</option> 
     <option value="B">A</option> 
     <option value="-">Other</option> 
     </select> 
    ) 
    } 

} 

Answer 1

Um besser zu erklären, wie Import-Anweisungen in ES6 arbeiten, kurz mit, wie die export etwas in der Datei zu tun hat.

Wenn Sie mit einem default exportieren, dann können Sie es importieren, wie Sie jede benannte Variable hat mit als das, was es ist, zugewiesen bekommen:

const foo = 'FOO'; 
export default foo; 

import otherFoo from '/the/file'; 

Beachten Sie, wie ich nicht verwenden curlies und ich definiere es mit einem beliebigen Namen, den ich möchte.

Nun, wenn Sie exportieren mehrere Dinge ohne den Standard:

export const foo = 'FOO'; 
export const bar = 'BAR'; 

import { foo, bar as otherBar } = from '/the/file'; 

Jetzt sehen Sie, dass Sie sie mit ihren erklärten Namen in der Datei und mit curlies importieren. Wenn Sie eine andere Variable zuweisen möchten, können Sie immer die as Notation verwenden.

Answer 2

Sie müssen über ES6 Import/Export lernen. In Ihrem Code, versuchen Sie dies:

import { VENDOR_LIST } from '../data/vendor'