Getting undefined when fetching data from server, error illegal invocation

Question

I'm building a banking application which uses JWT for authentication. After submitting the log-in form the server gives a response but for some reason I'm unable to fetch the data from the server, it keeps giving undefined which is odd as I can clearly see the server is giving a response.

Here is how I'm fetching the data

onClick={(event)=>{
                            event.preventDefault()
                            let user={tel, password}
                            fetch('http://localhost:3000/login', {
                                method:'POST',
                                headers:{'Content-Type':'application/json'},
                                body:JSON.stringify(user)
                            })
                                .then(response=>(response.json()))
                                .then(data=>localStorage.setItem('user',JSON.stringify(data)))
                                .then(navigate('/home'))
                                .then(window.location.reload)
                                .catch(error=>{console.log('error sending data to server')})
                        }}

When I don't navigate away from the page, I can see the generated token from the server on a blank page

The API currently handling the post on the express server

app.post('/login', (req,res,next)=>{
    let loginuser=req.body
    console.log(loginuser)
    let founduser
    Account.find({tel:loginuser.tel}).exec().then(response=>{founduser=response.lastname})
    if (loginuser){
        Account.find({tel:loginuser.tel}, ['userpassword']).exec().then(response=>{
            //New users will require bcrypt.compare() to log-in
            if(response.length!== 0){
                if(loginuser.password===response[0].userpassword){
                console.log('found user')
                res.setHeader('Access-Control-Allow-Origin', '*');
                res.json({token:jwt.sign({lastname:founduser},SECRET)})
                next()
            }
            else{
                console.log('hey! check input')
                res.json({errormsg:'Phone number and password mismatch'})
            }}
            else {
                console.log('user not found')
                res.json({errormsg:'User not found'})
            }
        })
    }
})

response from the server

{ tel: '0123456789', password: '' }
found user

browser console

error sending data to server

from above something is triggering the error handler for the fetch api, can someone explain why this is so and what I'm doing wrong, any assistance is deeply appreciated

I've tried return fetch('') adding setTimeout() to display the fetched data I'm using reactjs with node/express.js, ODM by mongoose

Answer 1

The issue is on this line:

 .then(window.location.reload)

You need to change it to:

 .then(() => window.location.reload())

then method expects a function to be passed in as an argument. When you pass window.location.reload directly, you're passing in a reference to the reload() method of the window.location object. However, the then method expects a function to be passed in, so it tries to invoke window.location.reload() as a function, which results in the illegal invocation error.