Question

因此，我设置了一个表单，用于获取用户详细信息并将数据设置为状态。然后，我通过onSubmit函数将状态数据传递给数据库。我正在使用axios.post请求到本地主机服务器。我的get请求似乎工作正常，但是提交表单后未发布数据。

我的代码看起来像这样。（我正在提取不必要的代码。）

UserForm.jsx

class UserForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      contact: "",
      company: "",
      mail: "",
      key: {
        wedding: false,
        MICE: false,
        corporate: false
      },
      app_no: "",
      items: "",
      isLoaded: false
    };
  }

handleSubmit = e => {
    console.log("Submitted");
    e.preventDefault();
    const users = {
      name: this.state.name,
      contact: this.state.contact,
      company: this.state.company,
      mail: this.state.mail,
      key: this.state.key,
      app_no: this.state.app_no
    };
    axios
      .post(
        "http://localhost:5000/api/items",
        { users },
        {
          headers: {
            "content-type": "application/json"
          }
        }
      )

      .then(console.log("Axios post is working"))
      .then(res => {
        console.log("Something: " + res);
        console.log(res.data);
      })
      .catch(err => {
        console.log(err);
      });
    console.log("Users; " + users.name);
  };


componentDidMount() {
    fetch("http://localhost:5000/api/items/", {
      headers: {
        "content-type": "application/json"
      }
    })
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json
        });
      });
    console.log(this.state.items);
  }

我的表单似乎运行正常，并且可以在控制台上提供所有项目。这是我的items.js文件：

const express = require("express");
const router = express.Router();

// Item model
const Item = require("../../models/Item");

// Routes
// @get API item get all items
// make a get req
router.get("/", (req, res) => {
  Item.find().then(items => res.json(items));
});

// @get Api item POST all items
// make a post req
// create an item
router.post("/", (req, res) => {
  const newItem = new Item({
    name: req.body.name,
    contact_no: req.body.contact_no,
    company_name: req.body.company_name,
    key: req.body.key
  });

  newItem.save().then(item => res.json(item));
});

// @del api item.
// delete request
router.delete("/:id", (req, res) => {
  Item.findById(req.params.id)
    .then(item => item.remove().then(() => res.json({ success: true })))
    .catch(err => res.status(404).json({ success: false }));
});

module.exports = router;

代码中是否缺少某些内容。我遍历了大多数axios文档，但似乎找不到问题。

server.js
const express = require("express");
const mongoose = require("mongoose");
const bodyParser = require("body-parser");

const app = express();
const items = require("./routes/api/items"); // Contains all the api routes

// Body Parser middleware
app.use(bodyParser.json());

// DB config
const db = require("./config/keys").mongoURI;

mongoose
  .connect(db, { useNewUrlParser: true })
  .then(() => console.log("Mongo is laoded"))
  .catch(err => console.log(err));

app.use("/api/items", items); // redirecting api routes to items

const port = process.env.PORT || 5000;

app.listen(port, () => console.log("Server started"));

让我知道是否应该发布更多代码。编辑：我没有得到“ console.log（”东西：“ + res）; console.log（res.data）;“控制台响应。我的控制台将打印：

(2) [{…}, {…}]
Submitted
UserForm.jsx:56 Axios post is working
UserForm.jsx:70 Users; someuser

Answer 1

我认为您永远无法通过req.body.name获取记录，因为您的POST请求似乎将其放在req.body.users.name下，因此，基本上，您希望获取您的记录来自req.body.users

的数据

Answer 2

也许是因为您的第二个.then然后在axios.post中将所有内容放在一个root@intel-x86-64:~# printf "%0.0f" 123.456 [ OK ] Stopped Serial Getty on ttyS0. [ OK ] Started Serial Getty on ttyS0.

中

尝试一下：

.then

这段代码中缺少什么吗？我无法通过axios发布请求发布

2 个答案: