2017-04-02 60 views
0

我在reactJS新我找不到爲什麼反應使用此語句ReactJS要求工作不

VAR AuthorApi =需要(「../../ API/authorApi」)無法加載authorApi;

這裏是我的項目

的src /組件/作家/ author.js代碼

'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代碼中的剪

"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}); 
    } 
}; 

,這裏是src/api/authorData.js代碼

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

};

錯誤鉻是: - 遺漏的類型錯誤:AuthorApi.getAllAuthors不是一個函數

+0

u能請加目錄結構 感謝幫助我 –

+0

目錄結構出現在author.js圖片didnt檢查 –

+0

對不起@radwan –

回答

3

您沒有導出您AuthorApi功能。嘗試添加:

module.exports = AuthorApiauthorApi.js文件的末尾。

+0

不工作抱歉 –

+0

@radwansalah你在這個改變後得到了什麼錯誤 –

+0

不知道這是否有幫助,但嘗試改變'this.setState({authors:AuthorApi.getAllAuthors()});''this.setState({authors:新的AuthorApi.getAllAuthors()});'工作示例將很好調試它。 – loelsonk