Question

我正在尝试将反应端的数据从onSubmit函数传递到我的节点/表达服务器。

控制台和页面上仅显示“ undefined”（未定义），因此未显示数据。有人可以帮帮我吗？谢谢！

请忽略：看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。看起来您的帖子大部分是代码；请添加更多详细信息。

App.js文件

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      generalDetails: "Text",
      fName: "Text",
      mName: "Text",
      LName: "Text",
      gender: "Text"
    };

    this.onContentChange = this.onContentChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }

  render() {
    return (
      <div className="App">
        <PageOne handleChange={this.onContentChange} />
        <PageTwo handleChange={this.onContentChange} />
        <PageThree handleChange={this.onContentChange} />
        <PageFour handleChange={this.onContentChange} />
        <PageFive handleChange={this.onContentChange} />
        <PageSix handleChange={this.onContentChange} />

        <Button onClick={this.onSubmitForm}>Submit Form</Button>

        <br />
        <br />
      </div>
    );
  }

  onSubmitForm = e => {
    e.preventDefault();
    let data = {
      generalDetails: this.state.generalDetails,
      firstName: this.state.firstName,
      middleName: this.state.middleName,
      lastName: this.state.lastName
    };

    axios
      .post("http://localhost:5000/home", data)
      .then(() => {
        //do something
      })
      .catch(() => {
        console.log("Something went wrong. Please try again later");
      });


  onContentChange(fieldname, data) {
    console.log("On Content Change", data);

    this.setState({
      [fieldname]: data
    });
  }
}

export default App;

服务器

const express = require("express");
const app = express();
const port = 5000;

const cors = require("cors");
app.use(cors());
var bodyParser = require("body-parser");
app.use(bodyParser.json()); // to support JSON-encoded bodies
app.use(
  bodyParser.urlencoded({
    // to support URL-encoded bodies
    extended: true
  })
);

app.get("/home", (req, res) => {
    console.log("Hello from .get /home", req.body.generalDetails );

})




app.post("/home", (req, res) => {

  const data = [{ generalDetails: req.body.generalDetails }];


  res.json(data);
});

app.listen(port, () => `Server running on port ${port}`);

Answer 1

您的问题非常模糊，因此我将只看您的代码就尽我所能。您从哪里得到不确定的？您在哪里尝试登录控制台？并且您在浏览器控制台和/或节点控制台中遇到任何错误吗？这些是我对您的问题所提出的问题，但这是我认为您的问题所在。

如果您尝试从前端发送get请求并尝试通过

接收它

app.get("/home", (req, res) => {
  console.log("Hello from .get /home", req.body.generalDetails );
})

然后，您需要从前端发送一个get请求，而不是一个post请求。现在，您的axios函数正在发出发布请求，因此它将在您的后端以发布路线而不是在get路线接收。

如果您要发送的是发布请求，那么您将在发布路由中收到请求，现在您的代码将回传generalDetials。问题是您有一个空函数从服务器接收回请求。无论您是发布帖子还是获得请求，都需要对这些信息进行处理。

执行以下操作，以便您看到正在发生的事情。发出发布请求，然后将响应记录到浏览器控制台：

axios
  .post("http://localhost:5000/home", data)
  .then(result => {
    console.log(result)
  })
  .catch(() => {
    console.log("Something went wrong. Please try again later");
  });

如果您在axios数据中重新获得了常规详细信息，那么您就可以成功地发出发布请求。

然后发出获取请求：

axios
  .get("http://localhost:5000/home", data)
  .then(result => {
    console.log(result)
  })
  .catch(() => {
    console.log("Something went wrong. Please try again later");
  });

如果您在节点控制台中记录信息，那么您将成功发出get请求。因为在您的后端中，您只有在get路由中登录到控制台。

看起来您有语法错误。您忘记关闭onSubmitForm功能。您缺少右花括号。

尝试将数据从react（前端）传递到节点服务器（后端）

1 个答案: