Javascript react.js中JSON输入的意外结束_Javascript_Reactjs_Npm_Promise_Fetch

Javascript react.js中JSON输入的意外结束

javascript reactjs npm

Javascript react.js中JSON输入的意外结束,javascript,reactjs,npm,promise,fetch,Javascript,Reactjs,Npm,Promise,Fetch,我得到一份工作未处理的拒绝（SyntaxError）：JSON输入意外结束按submit时出错这是我的代码： onButtonSubmit = () => { this.setState({imageUrl: this.state.input}) app.models .predict( Clarifai.FACE_DETECT_MODEL, this.state.input) .then(response => { if (response)

我得到一份工作

未处理的拒绝（SyntaxError）：JSON输入意外结束

按submit时出错

这是我的代码：

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

}

我是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));
  }

我没有从数据库中获取数字，但我不再得到错误，我认为您需要在将req.body提取为const id并在DB查询中使用它之前解析它

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

我认为在将req.body提取为const id并在DB查询中使用它之前，需要对其进行解析

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

这里有一些小问题

在您的
```
this.setState（Object.assign（this.state.user，{entries:count}）]
```
中，我理解您在这里试图做什么，但不确定这是您想要做的
而且你没有完全正确地履行你的承诺

记录

count

的值也会有所帮助（可能您没有得到预期的值）

另外，对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中是可行的）：
这里有一些小问题

在您的this.setState（Object.assign（this.state.user，{entries:count}）]
中，我理解您在这里试图做什么，但不确定这是您想要做的
而且你没有完全正确地履行你的承诺

记录count
的值也会有所帮助（可能您没有得到预期的值）
另外，对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中是可行的）：
查看服务器代码，似乎您正在尝试从结果数组返回第一个元素。返回此元素将导致返回JSON对象：
.then(entries => {
  res.json(entries[0]);
})

不过，您的前端代码似乎在等待计数，而不是其他：
.then((response) => response.json())
.then((count) => { ... })


我不完全确定这是否是您想要实现的，但是在JSON对象中发回条目计数应该可以在后端实现。还要注意，在catch
块中将错误作为对象发回：
db（'users'）。其中（'id'，'='，id）
.increment（'条目'，1）
.returning（'条目'）
。然后（条目=>{
res.json（{count:entries.length}）；
})
.catch（错误=>{
资源状态（400）
.json（{消息：'无法获取条目'}）
})

前端代码也需要一些修改（参见第二个then（）
和添加的catch块）
而不是Object.assign（）
，因为它更易于阅读和掌握：
fetch（'http://localhost:3000/image', {
方法：'放'，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify({
id:this.state.user.id
})
})
.then（（response）=>response.json（））
.然后（{count}）=>{
这是我的国家({
用户：{
…此.state.user，
参赛作品：count，
});
})
.catch（（{message}）=>{
警报（信息）
}

希望这有帮助！
查看服务器代码，似乎您正在尝试从结果数组返回第一个元素。返回此元素将导致返回JSON对象：
.then(entries => {
  res.json(entries[0]);
})

不过，您的前端代码似乎在等待计数，而不是其他：
.then((response) => response.json())
.then((count) => { ... })


我不完全确定这是否是您想要实现的，但是在JSON对象中发回条目计数应该可以在后端实现。还要注意，在catch
块中将错误作为对象发回：
db（'users'）。其中（'id'，'='，id）
.increment（'条目'，1）
.returning（'条目'）
。然后（条目=>{
res.json（{count:entries.length}）；
})
.catch（错误=>{
资源状态（400）
.json（{消息：'无法获取条目'}）
})

前端代码也需要一些修改（参见第二个then（）
和添加的catch块）
而不是Object.assign（）
，因为它更易于阅读和掌握：
fetch（'http://localhost:3000/image', {
方法：'放'，
标题：{'Content-Type'：'application/json'}，
正文：JSON.stringify({
id:this.state.user.id
})
})
.then（（response）=>response.json（））
.然后（{count}）=>{
这是我的国家({
用户：{
…此.state.user，
参赛作品：count，
});
})
.catch（（{message}）=>{
警报（信息）
}

希望这有帮助！
请发布服务器的答案。可能缺少标题。@RandyCasburn是一个对象{id:this.state.user.id}
。你确定你确实成功地取回了用户数据吗？在你取回数据之前，console.log你的this.state.user.id以确保。条目中的具体内容是什么？
？你能从服务器上发布json响应吗？如果服务器响应为空，。那么（）
将执行，但此行失败（response）=>response.json（）
。请发布服务器的答案。可能缺少一个标题。@RandyCasburn这是一个对象{id:this.state.user.id}
。您确定您确实成功地取回了用户数据吗？在进行取回之前，请将您的this.state.user.id记录下来，以确保正确。具体内容是什么<