node.js - 错误 : Network Error: with axios. 将方法请求多次发送到服务器。但随后捕获错误

Question

我对 React js 完全陌生。我的问题是当我在 react 端使用 axios.put 方法时:这是我的 React 组件中的一个方法:

commitAssign() {
  let memberIds = this.state.assignedList;
  // update the data
  const headers = {
    "Content-Type": "application/json"
  };
  axios
    .put(`/api/projects/${this.props.project._id}`, { memberIds }, headers)
    .then(res => {
      this.state.assignedList = [];
      this.props.onUpdate();
    })
    .catch(err => console.log(err));
}

这是我的特快路线:

app.put('/api/projects/:id',(req, res) => {
  //update database
  res.redirect(`/api/projects/${projectId}`);
})

当我运行react时，看起来像这样:

似乎 axios.put 向服务器发出多个请求，然后收到错误。而且，我 PUT 的数据仍然多次保存在数据库中(相同的数据)。

请注意，如果我将 PUT 方法更改为 POST ，一切都很好 - 没问题。而且我已经使用POSTMAN测试了服务器，也没有问题。

有人知道使用 PUT 方法时出现什么问题吗？

我正在使用:服务器依赖项: "body-parser": "^1.18.3", “cors”:“^2.8.4”， "express": "^4.16.3", “ Mongoose ”:“^5.2.6”客户端依赖项:

"dependencies": {
    "axios": "^0.18.0",
    "jquery": "^3.3.1",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "semantic-ui-css": "^2.3.3",
    "semantic-ui-react": "^0.82.1"
},
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "file-loader": "^1.1.11",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.4",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
}

编辑:这是我的服务器:

var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var cors = require('cors');
var app = express();
app.use(cors());
mongoose.connect('mongodb://localhost:27017/teamApp_V1', {
    useNewUrlParser: true
});
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());

app.get('/api/projects', (req, res) => {
    Project.find((err, allProjects) => {
        if (err || allProjects == null) {
            console.log(err);
        } else {
            res.json(allProjects);
        }
    });
});
//creact new project
app.post('/api/projects', (req, res) => {
    let newProject = req.body.newProject;
    Project.create(newProject, (err, newProject) => {
        if (err) {
            console.log(err);
        }
        res.redirect('/api/projects');
    });
});
//show
app.get('/api/projects/:id', (req, res) => {
    let id = req.params.id;
    Project.findById(id).populate('listMember').exec((err, foundProject) => {
        if (err || foundProject == null) {
            console.log(err);
            res.redirect('/api/projects');
        } else {
            res.json(foundProject);
        }
    });
});
//edit project - assign member
app.put('/api/projects/:id', (req, res) => {
    let projectId = req.params.id;
    let memberIds = req.body.memberIds;
    Project.findById(projectId, (err, foundProject) => {
        if (err || foundProject == null) {
            console.log(err);
            res.redirect('/api/projects');
        } else {
            memberIds.forEach((memberId) => {
                console.log(foundProject);
                //update member id to project
                foundProject.listMember.push(memberId);
                //update project that this member is work for
                Employee.findById(memberId, (err, foundMember) => {
                    if (err || foundMember == null) {
                        console.log(err);
                        res.redirect('/api/projects');
                    } else {
                        foundMember.project.push(foundProject._id);
                        foundMember.save();
                    }
                })
            })
            foundProject.save((err) => {
                if (err) {
                    console.log(err);
                    res.redirect('/api/projects');
                } else {
                    res.redirect(`/api/projects/${projectId}`);
                }
            });

        }
    });
});
//delete project 



// employees
//index employee
app.get('/api/employees', (req, res) => {
    Employee.find().populate('project').exec((err, allEmployees) => {
        if (err || allEmployees == null) {
            console.log(err);
        } else {
            res.json(allEmployees);
        }
    });
});

//create new employee
app.post('/api/employees', (req, res) => {
    let newEmployee = req.body.newEmployee;
    Employee.create(newEmployee, (err, newEmployee) => {
        if (err) {
            console.log(err);
        } else {
            //do nothing
        }
        res.redirect('/api/employees');
    })
});

//edit employee


app.get('*', (req, res) => {
    res.send('Oops! Page is not found.');
});

app.listen(8081, process.env.IP, () => {
    console.log('server is running');
});

Answer 1

我相信 Dat Tran 的答案大部分是正确的，但它不包含代码，也没有告诉您应该采用哪种方法以及如何采用它。

无论如何，这是由于重定向而发生的。您的代码导致无限重定向循环，在 Chrome 中如下所示:

当您遇到错误/成功时，无需重定向，只需发送 json，然后在收到 json 时在 UI 上显示错误/成功内容。

将方法更改为如下所示(注意我已添加注释):

app.put('/api/projects/:id', (req, res) => {
    let projectId = req.params.id;
    let memberIds = req.body.memberIds;
    Project.findById(projectId, (err, foundProject) => {
        if (err || foundProject == null) {
            console.log(err);
            res.json(err);
        } else {
            memberIds.forEach((memberId) => {
                console.log(foundProject);
                //update member id to project
                foundProject.listMember.push(memberId);
                //update project that this member is work for
                Employee.findById(memberId, (err, foundMember) => {
                    if (err || foundMember == null) {
                        console.log(err);
                        res.json({ someError: err }); // send an error msg. <====
                    } else {
                        foundMember.project.push(foundProject._id);
                        foundMember.save();
                    }
                })
            })
            foundProject.save((err) => {
                if (err) {
                    console.log(err);
                    res.json(err); // just like you did in app.get <====
                } else {
                    res.json(foundProject);
                }
            });

        }
    });
});