Question

我在React js（jsx）中有一个评论小部件，我正在使用React Dropzone并使用superagent将删除的文件上传到服务器。

我需要从我的应用程序返回文件对象（包含我的应用程序的文件ID等），并将它们与用户将提交的注释相关联。我试图将文件对象分配给状态变量'attachments'。由于superagent的异步性质，我认为，我实际上是用空数组填充我的状态变量。

我尝试使用回调，但收到了“未定义”错误。

以下是代码：

onDrop: function (newFiles) {


    newFiles.forEach((file)=>
    {
        this.setState({files: this.state.files.concat(file)});
    })

    var attachments = [];

    var req = request.post('/attachments/create');
    req.set('Accept', 'application/json');
    newFiles.forEach((file)=> {
        req.attach('img_attach', file);
        req.field('filename', file.name);
        req.field('itemType', 'comment');
        req.field('itemId', false);
        req.end(function(err,res){
            var json = $.parseJSON(res.text);
            attachments.push(json);
            attIds.push(json.id);

        });

    });

    attachments.forEach((file)=>
    {
        this.setState({
            attachments:this.state.attachments.concat([file])});
    });

},

这是回调尝试，它返回“无法读取未定义的属性'setState'”：

function fileAttach(err,res)
    {
        var json = $.parseJSON(res.text);
        this.setState({attachments:this.state.attachments.concat([json])});

    }

对于回调，而不是此

req.end(function(err,res){
            var json = $.parseJSON(res.text);
            attachments.push(json);
            attIds.push(json.id);

        });

我用这个

req.end(fileAttach);

所以，有一种可能性是我正在寻找一个类似于jquery的'context'选项，允许我在回调中使用'this'。

Answer 1

所以，对于我看到的第一个问题，你是在正确的轨道上。您需要将上下文绑定到该函数。 LodeRunner28已经在评论中回答了这个问题，但是你做了：

req.end(fileAttach.bind(this))

如果您不熟悉，Function.prototype.bind允许您手动强制任何功能的上下文变量。它非常方便，这意味着您永远不必依赖库（例如.jQuery）来提供上下文arg，您可以自己指定它：）

我看到的更大问题是您使用SuperAgent的方式。我相信你实际上发送了大量的请求;调用.end会触发SuperAgent发出请求，并且您在forEach循环中执行此操作。

我对SuperAgent不太熟悉，但我相信你可以做到：

newFiles.forEach( file => {
  req.attach('img_attach', file);
  req.field('filename', file.name);
  req.field('itemType', 'comment');
  req.field('itemId', false);
});

req.end(fileAttach.bind(this));

反应js / superagent / file dropzone

1 个答案: