提取没有返回数据作出反应

我是新来的反应，我很难获取单一书籍的数据超出列表，通过axios'get方法传递。我认为这与网址有关，但我一直无法修复它。提取没有返回数据作出反应

这里是我的代码：

export function loadBook(book){ 
 
    return dispatch => { 
 
     return axios.get('http://localhost:3000/api/books/book/:id').then(book => { 
 
      dispatch(loadBookSuccess(book.data)); 
 
      console.log('through!'); 
 
     }).catch(error => { 
 
      console.log('error'); 
 
     }); 
 
    }; 
 
} 
 

 
//also tried this 
 
export function loadBook(id){ 
 
    return dispatch => { 
 
     return axios.get('http://localhost:3000/api/books/book/' + {id}).then(book => { 
 
      dispatch(loadBookSuccess(book.data)); 
 
      console.log('through!'); 
 
     }).catch(error => { 
 
      console.log('error'); 
 
     }); 
 
    }; 
 
}

是包含变量链接到每一个人的书

<div className="container"> 
 
       <h3><Link to={'/book/' + book._id}> {book.title}</Link></h3> 
 
       <h5>Author: {book.author.first_name + ' ' + book.author.family_name}</h5> 
 
       <h4>Summary: {book.summary}</h4> 
 
       <BookGenre genre={genre} /> 
 
           
 
      </div>

链接路线

HTML代码：

<Route path="/book/:id" component={BookPage} />

编辑：代号为表成分

class BookPage extends React.Component{ 
 
    render(){ 
 
     const book = this.props; 
 
     const genre = book.genre; 
 
     console.log(book); 
 

 
     return(
 
      <div> 
 
      <div> 
 
       <h3> {book.title}</h3> 
 
       <h5>Author: {book.author.first_name + ' ' + book.author.family_name}</h5> 
 
       <h4>Summary: {book.summary}</h4> 
 
       <BookGenre genre={genre} />     
 
      </div> 
 
     
 
     </div> 
 
     ); 
 
    } 
 
} 
 

 
BookPage.propTypes = { 
 
    book: PropTypes.object.isRequired 
 
}; 
 

 
//setting the book with mapStateToProps 
 
function mapStateToProps (state, ownProps){ 
 
    let book = {title: '', author: '', summary: '', isbn: '', genre: []}; 
 
    const bookid = ownProps.params._id; 
 
    if(state.books.length > 0){ 
 
     book = Object.assign({}, state.books.find(book => book.id)); 
 
    } 
 
    return { 
 
     book: book 
 
    }; 
 
} 
 

 
function mapDispatchToProps (dispatch) { 
 
    return { 
 
     actions: bindActionCreators(loadBook, dispatch) 
 
    }; 
 
} 
 

 

 

 
export default connect(mapStateToProps, mapDispatchToProps)(BookPage);

来源

2017-10-05 Nnanyielugo

首先检查这个api是否正在工作'http：// localhost：3000/api/books/book /'+ {id} fine.Next从哪里调用函数loadBook（）。 – pritesh

那个id是什么，是一个对象还是一个字符串，如果它的一个字符串不需要使用花括号。 –

@pritesh，api正在工作。使用邮差测试它。动作loadBook（）充当api调用和redux thunk。这是它应该调用的路由：*** router.get（'/ books/book /：id'，book.book_detail）; *** – Nnanyielugo

而不是这样做： -

axios.get('http://localhost:3000/api/books/book/' + {id})

英语新HOULD这样做： -

axios.get(`http://localhost:3000/api/books/book/${id}`)

所以你action.js可能是这样的： -

export function loadBook(id){ 
    const request = axios.get(`http://localhost:3000/api/books/book/${id}`); 
    return dispatch => { 
     request.then(book => { 
      dispatch(loadBookSuccess(book.data)); 
     }).catch(error => { 
      console.log('error'); 
     }) 
    }; 
}

由于ID，你通过它似乎是一个字符串，因此它可以连接使用ES6模板字符串，并确保你包装你的字符串反向。或者您可以通过+运营商来完成，也请确保您通过id作为您的loadbook函数中的参数，以便您可以将其加入到您的URL中。

来源

2017-10-05 12:36:28

已添加。没有工作。 API没有返回数据。 – Nnanyielugo

@Nnanyielugo这是我的错误，我已经更新了答案，请重新检查它，并告诉我是否有错误 –

还没有。控制台记录这个*** GET/api/books/book/undefined ****。在chrome调试器上，loadBook（id）显示'undefined'，甚至不会传递给reducer。 – Nnanyielugo

提取没有返回数据作出反应

回答

相关问题