React JS js中的AJAX请求不起作用

Question

我试图通过AJAX请求从我的数据库中获取信息,但不会触发成功事件.

然而,服务器接收AJAX请求,因为它在终端中触发正确的控制台日志.

我正在使用Express框架在Node中构建它.

这是触发AJAX调用的代码.'componentDidMount triggered'被记录到控制台.但随后就停止了.即使我知道服务器已接收enter code here到AJAX请求,也不会触发'success'或'error'中的console.log .

app.get('/api/:name', function (req,res){
    name = req.params.name;
    Member.findOne({username: name}, function(err,member){
        res.setHeader('Content-Type', 'application/json');
        res.write(member.toString());
        console.log('member fetched from DB: ', member);
        res.end();
    });
});

我也没有得到任何其他错误,所以我不知道为什么这不起作用.

有人可以帮忙吗？

更新:感谢您的帮助.我现在离我更近了一步.我没有意识到在提供AJAX请求时我需要'res.end'.当我改变这个时,我设法得到了回复,尽管这是一个错误.

她是服务器端代码:

app.get('/api/:name', function (req,res){
    name = req.params.name;
    Member.findOne({username: name}, function(err,member){
        res.setHeader('Content-Type', 'application/json');
        res.write(member.toString());
        console.log('member fetched from DB: ', member);
        res.end();
    });
});

Answer 1

切换到你的问题,但同样重要的是找出为什么没有调用.success:你的代码不是setState在成功处理程序中调用Main的,因为成功函数不是"在你的组件中",而是"通过jQuery,在某处".

如果要setState在成功处理过程中调用组件,请缓存组件,然后调用组件函数:

var self = this;
$.ajax({
  ...
  success: function() {
    self.setState({ ... });
  }
...

或者使用JavaScript bind函数(与jQuery.bind无关)将成功函数的执行上下文显式设置为您的组件:

...
success: function(data) {
  console.log('success')
  this.setState({data: data});
}.bind(this),
...