React + Backbone 应用程序制作 2 个帖子而不是 1 个答案

【问题标题】：React + Backbone application making 2 POSTS instead of 1React + Backbone 应用程序制作 2 个帖子而不是 1 个
【发布时间】：2015-10-02 12:18:17
【问题描述】：

我有一个用 React 和 Backbone 实现的宁静的待办事项列表。

目前，我不是在谈论数据库；在我的 server.js 中有一个数组 var mytodos = [];。
这是 POST 的服务器代码（使用 Express）：

app.post('/todos', function(req, res) {
    var todo = {
        id: mytodos.length,
        title: req.body.length,
        completed: req.body.completed         
    };

    mytodos.push(todo);
    console.log('POST ' + JSON.stringify(todo));
    res.send(todo);
});

当我将一个项目添加到列表中时，我看到出于某种原因创建了两个 POST。

POST: {"id":0,"title":"test","completed":false}
POST: {"id":1,"title":"test","completed":false}

在 Chrome 开发中。模式，我明白了：

PUT localhost/todos/0 404 (Not Found)
PUT localhost/todos/1 404 (Not Found)

两个 PUT 请求！

试图通过它进行推理 - save() 被调用，它调用 sync()。由于模型还没有 id（只有 cid），它发出一个 POST 请求并将一个 todo（id = 0）添加到 mytodos，然后更新客户端上的模型（添加 @ 987654331@ 属性）。由于检测到更改，它会执行另一个 save() 将其放入服务器（

这可以解释 PUT，但不能解释双重 POST。

这里是调用save() 的地方（在TodoApp = React.createClass... 下：

componentDidUpdate: function() {
    this.props.todos.forEach(function(todo) {
        console.log('componentDidUpdate: ' + todo.id); // logs: undefined, 0, 1
        todo.save();
    });
},
...
save: function(todo, text) {
    console.log('Save: ' + todo.id); // only logged on update
    todo.save({title: text});
    this.setState({editing: null});
},
...
}

为什么会这样？
为什么除了POSTing之外还有PUTting？为什么要重复两次？

编辑：

我通过将 create 更改为 add - reference 来解决双重 POST 问题。

最后一个问题是PUT 404 (Not Found) 用于肯定在服务器上的项目。有趣的是，PUT 似乎没有通过我的服务器。我的服务器只记录POST。 PUT 正在其他地方记录。

【问题讨论】：

如果视图（或任何对象）被初始化两次（或不止一次），我们也遇到过类似的问题，并且对我们来说会出现双重服务器请求问题。您可以在chrome中放置一个调试器，看看它是否被击中两次。如果您在更高级别（例如在模块中）初始化对象，您是在子视图中重新创建对象吗？
我认为您需要展示触发 POST 的 React 组件，您的服务器代码不是问题。
糟糕 - 看起来我不小心删除了这篇文章的后半部分。已更新。

标签： javascript rest backbone.js express reactjs

【解决方案1】：

我通过将create 更改为add 解决了双重POST

更具体地说，某个事件触发了Backbone.Collection.create 调用，根据this 与服务器同步。

在我的 React 代码中，我有一个 componentDidUpdate，它调用 Backbone.Model.save，它也尝试发送到服务器。 Here.

由于事件导致create 和save 都被执行，POST 被触发了两次。

【讨论】：