2017-05-08 45 views
1

我有下面的代码。渲染器中的console.log实际上给出数组长度为3.但是没有显示。componentDidMount未设定状态或重新呈现

AuthorApi.js

//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() { 
     console.log("Inside getAll"); 
     console.log("Authors length is : " + authors.length); 
     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(_clone(author)); 
     } 

     return author; 
    }, 

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

module.exports = AuthorApi; 

请让我知道我做错了。

+0

解决在使用之前你的诺言'setState' – lux

+0

您好我试图用uthorApi.getAllAuthors() 。然后(RES => this.setState({作者:RES}))却得到了错误,则说的是不是一个函数。我用AuthorAPI代码更新了这个问题。 –

回答

2

尝试在地图中添加返回。

this.state.authors.map((author) => { 
         return (<tr key={author.id}> 
          <td><a href={"/#authors/" + author.id}>{author.id}</a></td> 
          <td>{author.firstName} {author.lastName}</td> 
         </tr>) 
        }, this)} 
+0

是的,它的工作。谢谢:) –

+0

如果我必须做一个实际的ajax调用,我仍然应该在componentDidMount()方法中执行它? –

相关问题