fetch not returning data in react

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

Firstly check if this api is working 'localhost:3000/api/books/book' + {id} fine.Next from where are u calling the function loadBook() and are u passing the id properly. — pritesh
– pritesh, Commented Oct 5, 2017 at 12:31
what is that id,is that a object or just a string,if its a string no need to use curly braces. — Vinit Raj
– Vinit Raj, Commented Oct 5, 2017 at 12:34
@pritesh, the api is working. Tested it using postman. The action loadBook() acts as both the api call and the redux thunk. This is the route it is supposed to call: router.get('/books/book/:id', book.book_detail); — Nnanyielugo
– Nnanyielugo, Commented Oct 5, 2017 at 13:04

Vinit Raj · Accepted Answer · 2017-10-05 14:15:27Z

4

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.

edited Oct 5, 2017 at 14:15

answered Oct 5, 2017 at 12:36

Vinit Raj

1,9101 gold badge17 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vinit Raj Over a year ago

@Nnanyielugo It was my mistake i have updated the answer please recheck it and tell me if something is wrong

Nnanyielugo Over a year ago

Still nothing. Console logs this *** GET /api/books/book/undefined****. And on chrome debugger, loadBook(id) shows 'undefined', and doesn't even get passed on to the reducer.

Vinit Raj Over a year ago

are you able to console.log the id in loadbook function,and please specify where you have called this action creator

Nnanyielugo Over a year ago

The action creator is in the same file as the thunk that makes the api call. this is the action creator export function loadBookSuccess(book){ return {type: types.LOAD_BOOK_SUCCESS, book}; //create corresponding handler in reducers file }

Nnanyielugo · Accepted Answer · 2018-04-06 16:27:53Z

0

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.

answered Apr 6, 2018 at 16:27

Nnanyielugo

4034 silver badges15 bronze badges

1 Comment

Vinit Raj Over a year ago

Glad that you figured it out by my answer :)

Collectives™ on Stack Overflow

fetch not returning data in react

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related