ReactJS erforderlich funktioniert nicht

Question

: Ich bin in reactJS und ich kann nicht, warum reagieren kann nicht geladen werden authorApi mit dieser Anweisung

var AuthorApi = require ('../../ api/authorApi') finden;

Hier ist ein snips von meinem Projekt

src/components/Autoren/author.js Code

'use strict'; 

var React = require('react'); 
var AuthorApi = require('../api/authorApi'); 

var Authors = React.createClass({ 
    getInitialState: function() { 
    return { 
     authors: [] 
    }; 
    }, 

    componentWillMount: function() { 
    this.setState({ authors: AuthorApi.getAllAuthors() }); 
    }, 

    render: function() { 
    var createAuthorRow = function (author) { 
     return (
     <tr key={author.id}> 
      <td> 
      <a href={"/#authors/" + author.id}>{author.id}</a> 
      </td> 
      <td> 
      {author.firstName} {author.lastName} 
      </td> 
     </tr> 
    ); 
    }; 

    return (
     <div> 
     <h1>Authors</h1> 
       <table className="table"> 
        <thead> 
         <th>ID</th> 
         <th>Name</th> 
        </thead> 
        <tbody> 
         {this.state.authors.map(createAuthorRow, this)} 
        </tbody> 
       </table> 
      </div> 
    ); 
    } 
}); 

module.exports = Authors; 

src/api/authorApi.js Code

"use strict"; 

//This file is mocking a web API by hitting hard coded data. 
var authors = require('./authorData').authors; 
var _ = require('lodash'); 

//This would be performed on the server in a real app. Just stubbing in. 
var _generateId = function(author) { 
    return author.firstName.toLowerCase() + '-' + author.lastName.toLowerCase(); 
}; 

var _clone = function(item) { 
    return JSON.parse(JSON.stringify(item)); //return cloned copy so that the item is passed by value instead of by reference 
}; 

var AuthorApi = { 
    getAllAuthors: function() { 
     return _clone(authors); 
    }, 

    getAuthorById: function(id) { 
     var author = _.find(authors, {id: id}); 
     return _clone(author); 
    }, 

    saveAuthor: function(author) { 
     //pretend an ajax call to web api is made here 
     console.log('Pretend this just saved the author to the DB via AJAX call...'); 

     if (author.id) { 
      var existingAuthorIndex = _.indexOf(authors, _.find(authors, {id: author.id})); 
      authors.splice(existingAuthorIndex, 1, author); 
     } else { 
      //Just simulating creation here. 
      //The server would generate ids for new authors in a real app. 
      //Cloning so copy returned is passed by value rather than by reference. 
      author.id = _generateId(author); 
      authors.push(author); 
     } 

     return _clone(author); 
    }, 

    deleteAuthor: function(id) { 
     console.log('Pretend this just deleted the author from the DB via an AJAX call...'); 
     _.remove(authors, { id: id}); 
    } 
}; 

und hier ist src/api/authorData.js code

module.exports = { 
authors: 
[ 
    { 
     id: 'cory-house', 
     firstName: 'Cory', 
     lastName: 'House' 
    }, 
    { 
     id: 'scott-allen', 
     firstName: 'Scott', 
     lastName: 'Allen' 
    }, 
    { 
     id: 'dan-wahlin', 
     firstName: 'Dan', 
     lastName: 'Wahlin' 
    } 
] 

};

Fehler in Chrom ist: - Uncaught Typeerror: AuthorApi.getAllAuthors ist keine Funktion

Answer 1

Sie Ihre AuthorApi Funktion nicht exportieren. Versuchen Sie Folgendes hinzuzufügen:

module.exports = AuthorApi am Ende der authorApi.js Datei.