javascript - React Router 在 POST 请求上添加 URL 查询参数

Question

大家好我的 Nerd 们，

我遇到一个问题，当我发出 POST 请求时(使用 React 函数内的 Axios 库)，它会自动附加来自“提交后，在页面 URL 中将“创建用户”表单添加到搜索参数中。我不喜欢这个，因为我宁愿它隐藏在 POST 请求中，而不是扔到页面 URL 上。

图片:URL after user was created

这是 React Router 将 body 请求中发送的数据添加到 react router 历史对象的 location.search 的直接结果。因此，很自然地，由于 React 路由器历史记录对象是可变的，我尝试将其添加到提交的响应中:

this.props.location.search.replace({*some random parameter stuff here*});

这是希望它能从 URL 中删除所有这些内容并重定向到没有搜索参数的页面。无论如何，我已经看到其他一些性质相似的帖子，但它们似乎并没有回答这个确切的问题。

TL;DR:我正在尝试发送 POST 请求，而 React Router 没有将我的 req.body 数据添加到我的 URL 和 location.search 对象中的参数。

我的代码:

Users.js:(前端)

handleSubmit (e) {
    Axios.post(`${server}/s/admin/users/create`, {
        headers: {
            'Content-Type': 'application/json'
        },
        data: {
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            username: this.state.username,
            password: this.state.password,
            email: this.state.email
        }
    }).then((res) => {
        console.log(res);
    }).catch(err => console.log(err));
}

users.js:(后端)

app.post("/s/admin/users/create", (req, res) => {
let rb = req.body.data;
let newUser = new User({
    _id: uid.time(),
    orgID: req.session.orgID,
    email: rb.email,
    username: rb.username,
    password: bcrypt.hashSync(rb.password, hashRate),
    firstName: rb.firstName,
    lastName: rb.lastName,
    data: { exist: "true" },
    settings: { exist: "true" }
});

// Save new owner to db
newUser.save((err, data) => {
    if (err) return console.error(err);
    res.json({info: `A new user, ${newUser.firstName} ${newUser.lastName}, has been created successfully.`});
});

});

谢谢!

附言这是我的第一篇文章，感谢您的耐心等待。我已经尝试搜索并解决这个问题大约一天了。

Answer 1

你能试试这样改写吗？导致 axios.post 期望

axios({
  method: 'post',
  url: `${server}/s/admin/users/create`,
  headers: {
    'Content-Type': 'application/json'
  },
  data: {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    username: this.state.username,
    password: this.state.password,
    email: this.state.email
  }
}).then((res) => {
  console.log(res);
}).catch(err => console.log(err));

Axios.post 方法需要第二个参数作为数据，但你已经传递了配置，另一种方法是在第三个参数中传递数据和配置。

handleSubmit(e) {
  Axios.post(`${server}/s/admin/users/create`, {
      firstName: this.state.firstName,
      lastName: this.state.lastName,
      username: this.state.username,
      password: this.state.password,
      email: this.state.email
    }, {
      headers: {
        'Content-Type': 'application/json'
      }
    }
  }).then((res) => {
  console.log(res);
}).catch(err => console.log(err));
}