在反应中不获取数据

Question

I'm new to react, i'm having difficulty getting data for a single book out of list, be passed through via axios' get method. I think it has something to do with the url, but I have been unable to get fix it.

Here's my code:

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

Html code that contains a variable link to each individual book

  <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> 

link in Route:

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

Edit: code for the book component

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

Answer 1

Instead of doing this:-

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

You should do like this:-

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

So your action.js might look like this:-

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

Since the id, you have passed it seems to be a string so it can be concatenated using ES6 template strings and make sure you wrap your strings in backtick . or you can do it by + operator, also make sure you pass id as a parameter in your loadbook function so that you can join it to your URL.

Answer 2

Figured out the solution to this problem. My mistake was that I failed to send the id of the item I along with the api call. Using componentDidMount and sending the dynamic id from the url params solved this problem for me.

Thank you, @Vinit Raj, I guess I was too much of a rookie then.