反应 js / superagent / 文件 dropzone

Question

我在 React js (jsx) 中有一个评论小部件，我正在使用 React Dropzone and uploading the dropped files to the server, using superagent。

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

我曾尝试使用回调，但出现 'undefined' 错误。

代码如下：

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

},

这是 returns "Cannot read property 'setState' of undefined":

的回调尝试

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

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

Answer 1

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

req.end(fileAttach.bind(this))

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

我看到的更大问题是您使用 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 / 文件 dropzone

react js / superagent / file dropzone

superagent

reactjs