最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Unexpected end of JSON input in react.js - Stack Overflow

programmeradmin0浏览0评论

I'm getting an

Unhandled Rejection (SyntaxError): Unexpected end of JSON input

error when I press submit.

this is my code:

onButtonSubmit = () => {
this.setState({imageUrl: this.state.input})
app.models
  .predict(
    Clarifai.FACE_DETECT_MODEL, 
    this.state.input)
  .then(response => {
    if (response) {
      fetch('http://localhost:3000/image', {
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
        })
      }).then((response) => response.json())
        .then((count) => {
          this.setState(Object.assign(this.state.user, {entries: count}));
        })
  }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
.catch(err => console.log(err));

}

My app.js

I new to React.js and I want to learn more, but I can't figure out why I get this error, and it goes through because the database gets updated. And when I login again, the page is also updated.

the error I get

    Unhandled Rejection (SyntaxError): Unexpected end of JSON input
(anonymous function)
C:/Users/cmham/Projekter/facedetector/src/App.js:94
  91 |     body: JSON.stringify({
  92 |       id: this.state.user.id
  93 |   })
> 94 | }).then((response) => response.json())
     | ^  95 |   .then((count) => {
  96 |     this.setState(Object.assign(this.state.user, {entries: count}));
  97 |   })
View piled

how do I resolve this?

Edit my server part

app.put('/image', (req, res) => {
  const { id } = req.body;
  db('users').where('id', '=', id)
    .increment('entries', 1)
    .returning('entries')
    .then(entries => {
      res.json(entries[0]);
    })
    .catch(err => res.status(400).json('unable to get entries'))
})

Edit 2 Now I receive a 1 from the server but what I need is the updated number from the database.

this is my server now:

app.put('/image', (req, res) => {
  const { id } = req.body;
  db('users').where('id', '=', id)
    .increment('entries')
    .returning('entries')
    .then(entries => {
      res.json(entries);

})
  .catch(err => res.status(400).json('unable to get entries'))
})

and this is my App.js:

onButtonSubmit = () => {
this.setState({imageUrl: this.state.input})
app.models
  .predict(
    Clarifai.FACE_DETECT_MODEL, 
    this.state.input)
  .then(response => {
    if (response) {
      fetch('http://localhost:3000/image', {
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
        })
      }).then((response) => response.json())
        .then((count) => {
           console.log(count)
          this.setState({
            ...this.state.user, entries: count++

          });
        })
        .catch(error => console.log('An error occured ', error))
  }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
.catch(err => console.log(err));
  }

I don't get the number from the database, but I no longer get an error

I'm getting an

Unhandled Rejection (SyntaxError): Unexpected end of JSON input

error when I press submit.

this is my code:

onButtonSubmit = () => {
this.setState({imageUrl: this.state.input})
app.models
  .predict(
    Clarifai.FACE_DETECT_MODEL, 
    this.state.input)
  .then(response => {
    if (response) {
      fetch('http://localhost:3000/image', {
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
        })
      }).then((response) => response.json())
        .then((count) => {
          this.setState(Object.assign(this.state.user, {entries: count}));
        })
  }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
.catch(err => console.log(err));

}

My app.js

I new to React.js and I want to learn more, but I can't figure out why I get this error, and it goes through because the database gets updated. And when I login again, the page is also updated.

the error I get

    Unhandled Rejection (SyntaxError): Unexpected end of JSON input
(anonymous function)
C:/Users/cmham/Projekter/facedetector/src/App.js:94
  91 |     body: JSON.stringify({
  92 |       id: this.state.user.id
  93 |   })
> 94 | }).then((response) => response.json())
     | ^  95 |   .then((count) => {
  96 |     this.setState(Object.assign(this.state.user, {entries: count}));
  97 |   })
View piled

how do I resolve this?

Edit my server part

app.put('/image', (req, res) => {
  const { id } = req.body;
  db('users').where('id', '=', id)
    .increment('entries', 1)
    .returning('entries')
    .then(entries => {
      res.json(entries[0]);
    })
    .catch(err => res.status(400).json('unable to get entries'))
})

Edit 2 Now I receive a 1 from the server but what I need is the updated number from the database.

this is my server now:

app.put('/image', (req, res) => {
  const { id } = req.body;
  db('users').where('id', '=', id)
    .increment('entries')
    .returning('entries')
    .then(entries => {
      res.json(entries);

})
  .catch(err => res.status(400).json('unable to get entries'))
})

and this is my App.js:

onButtonSubmit = () => {
this.setState({imageUrl: this.state.input})
app.models
  .predict(
    Clarifai.FACE_DETECT_MODEL, 
    this.state.input)
  .then(response => {
    if (response) {
      fetch('http://localhost:3000/image', {
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
        })
      }).then((response) => response.json())
        .then((count) => {
           console.log(count)
          this.setState({
            ...this.state.user, entries: count++

          });
        })
        .catch(error => console.log('An error occured ', error))
  }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
.catch(err => console.log(err));
  }

I don't get the number from the database, but I no longer get an error

Share Improve this question edited Feb 7, 2019 at 15:08 TWOcvfan asked Feb 5, 2019 at 14:46 TWOcvfanTWOcvfan 3981 gold badge3 silver badges22 bronze badges 7
  • Please post the answer of the server. There might be a header missing. – chrisg86 Commented Feb 5, 2019 at 14:49
  • @RandyCasburn that is an object {id:this.state.user.id} . – oma Commented Feb 5, 2019 at 14:54
  • are you sure you are actually getting the user data back successfully? console.log your this.state.user.id just before you make your fetch to make sure. – GifCo Commented Feb 5, 2019 at 15:11
  • 2 What exactly is in entries? Can you post the json response from the server? – chrisg86 Commented Feb 5, 2019 at 15:14
  • 1 If the server response is empty,.then() will execute, but fail on this line (response) => response.json(). – chrisg86 Commented Feb 5, 2019 at 16:12
 |  Show 2 more ments

4 Answers 4

Reset to default 2

I think you need to parse the req.body before extracting it to const id and using it on your DB query

const { id } = JSON.parse(req.body);

There are a number of minor issues here

  • In your this.setState(Object.assign(this.state.user, {entries: count})), I understand what you are trying to do here but not sure this is how you want to do it.
  • Also you aren't fully handling your promise properly

logging the value of count would also help though (it's possible you are not getting the value you expect

app.models
  .predict(
    Clarifai.FACE_DETECT_MODEL, 
    this.state.input)
  .then(response => {
    if (response) {
      fetch('http://localhost:3000/image', {
          method: 'put',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            id: this.state.user.id
        })
      }).then((response) => response.json())
        .then((count) => {
          this.setState({
             user: Object.assign(this.state.user, {entries: count}) 
// Notice the difference here 
          });
        })
        .catch(error => console.log('An error occured ', error))
  }
    this.displayFaceBox(this.calculateFaceLocation(response))
  })
.catch(err => console.log(err));

Also, not very familiar with knex but you may want to change

app.put('/image', (req, res) => {
  const { id } = req.body;
  db('users').where('id', '=', id)
    .increment('entries')
    .returning('entries')
    .then(entries => {
      res.json(entries);

})
  .catch(err => res.status(400).json('unable to get entries'))
})

to something like:

app.put('/image', (req, res) => {
  const { id } = req.body;

  db('users').where('id', '=', id)
    .increment('entries', 1)
    .then(()=> 
      db('users').where('id', '=', id).then(user => res.json(user[0].entries))
    )
    .catch(err => res.status(400).json('unable to get entries'))
})

in your server.js

I suspect you may also be able to do something like (I've not used knex before but something like this is doable in SequelizeJS):

db('users').where({id}).then(user => 
  user[0].increment('entries', 1).then(() => res.json(user[0].entries))
).catch(err => res.status(400).json('unable to get entries'))

Looking at your server code, it seems that you are trying to return the first element from the result array. Returning this would result in a JSON object being sent back:

.then(entries => {
  res.json(entries[0]);
})

Your frontend code, though, seems to wait for a count and nothing else:

.then((response) => response.json())
.then((count) => { ... })

I'm not entirely sure if that's what you want to achieve, but sending the entry count back in a JSON object should do the trick on the backend side. Also note sending back the error as an object in the catch block:

db('users').where('id', '=', id)
  .increment('entries', 1)
  .returning('entries')
  .then(entries => {
    res.json({ count: entries.length });
  })
  .catch(err => {
    res.status(400)
       .json({ message: 'unable to get entries' })
  })

Frontend code also needs some modifications (see the second then() and added catch block). I would also encourage using the object spread syntax instead of Object.assign() as it's easier to read and grasp:

fetch('http://localhost:3000/image', {
  method: 'put',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({
    id: this.state.user.id
  })
})
.then((response) => response.json())
.then(({ count }) => {
  this.setState({
    user: {
      ...this.state.user, 
      entries: count,
  });
})
.catch(({ message })=> {
  alert(message)
}

Hope this helps!

this may happen for your server receiving data name and your client sending name is not same. like (//in server (req.body.userName) & //in client (fetch....{body:json.stringfy({username : user.username//from your state})}

look at the star marks, this user name are not equal. hope you could solve your problem.

发布评论

评论列表(0)

  1. 暂无评论