Неожиданное завершение ввода JSON вact.js

Question

Я получаю

Необработанный отказ (SyntaxError): неожиданный конец ввода JSON

при нажатии кнопки подтверждения.

thisмой код:

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

}

Мой app.js

Я новичок в React.js и хочу узнать больше, ноЯ не могу понять, почему я получаю эту ошибку, и она проходит, потому что база данных обновляется.И когда я снова захожу, страница тоже обновляется.

ошибка, которую я получаю

    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 compiled

как мне решить эту проблему?

Редактировать мою серверную часть

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

Редактировать 2 Теперь я получаю 1 от сервера, но мне нужен обновленный номер из базы данных.

Теперь это мой сервер:

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

иэто мой 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));
  }

Я не получаю номер из базы данных, но больше не получаю сообщение об ошибке

Answer 1

Здесь есть ряд незначительных проблем

• В вашем this.setState(Object.assign(this.state.user, {entries: count})) я понимаю, что вы пытаетесь сделать здесь, но не уверен, что именно так вы хотите это сделать.
• Также вы не полностью выполняете свое обещание должным образом.

регистрация значения count также может помочь (возможно, вы не получаете ожидаемое значение

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

Кроме того, вы не очень знакомы с knex, но вы можете изменить

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

на что-то вроде:

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

в вашем server.js

Я подозреваю, что вы также можете сделать что-то вроде (я раньше не использовал knex, но что-то подобное можно сделать в 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'))

Answer 2

Глядя на код вашего сервера, кажется, что вы пытаетесь вернуть первый элемент из массива результатов.Возвращение этого приведет к тому, что объект JSON будет отправлен обратно:

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

Ваш код внешнего интерфейса, похоже, ожидает подсчета и ничего больше:

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

---

IЯ не совсем уверен, что это то, чего вы хотите достичь, но отправка счетчика записей обратно в объект JSON должна сработать на стороне сервера.Также обратите внимание, что отправка ошибки обратно в виде объекта в блоке catch:

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

Код внешнего интерфейса также нуждается в некоторых модификациях (см. Второй then() и добавленный блок catch).Я также рекомендовал бы использовать синтаксис распространения объекта вместо Object.assign(), поскольку его легче читать и понимать:

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

Надеюсь, это поможет!

Answer 3

Я думаю, вам нужно проанализировать req.body, прежде чем извлекать его в const id и использовать в запросе к БД

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