ReferenceError：未定义电子邮件

Question

您好，请帮助苦苦挣扎的开发人员。

我整天都在努力解决这个问题，但无济于事。基本上我想做的就是从我的 AddUsers 类中发布，并将其存储到我的 sql 数据库中。这是一个非常简单的查询，但让我变得更好！状态会随着变化而更新，但似乎是 server.js 的问题（错误包含在帖子底部）

服务器.js

app.post("/admin-Add-Users", function(req, res) {
  var request = new sql.Request();

  // query to the database and get the records
  request.query(
    "insert into Login (email, password) values ('" +
      req.body.email +
      "','" +
      req.body.password +
      "')",
    function(err, recordset) {
      if (err) console.log(err);
    }
  );
  res.send({ message: "Success" });
});

AddUsers 类

class AddUsers extends React.Component {
  constructor() {
    super();

    this.state = { users: [], email: "", password: "" };
    this.onSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const data = { email: this.state.email, password: this.state.password };

    fetch("/admin-Add-Users", {
      method: "POST", // or 'PUT'
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    })
      .then(response => response.json())
      .then(data => {
        console.log("Success:", data);
      })
      .catch(error => {
        console.error("Error:", error);
      });
  }

  render() {
    console.log(this.state.users);
    return (
      <div>
        <LoginForm></LoginForm>

        <form>
          <input
            type="text"
            placeholder="email"
            value={this.state.email}
            onChange={e => this.setState({ email: e.target.value })}
          />
          <input
            type="text"
            placeholder="password"
            value={this.state.password}
            onChange={e => this.setState({ password: e.target.value })}
          />
          <input type="submit" onClick={this.onSubmit} />
        </form>
      </div>
    );
  }
}

ReferenceError: email is not defined

更新：在尝试了我得到的建议后，我现在恢复了一个新错误。

Error: SyntaxError: Unexpected token < in JSON at position 0 

Answer 1

您的 React 应用似乎没有任何问题。

问题出在您的 API 端，您在没有实际读取请求 json 内容（电子邮件和密码）字段的情况下制定 insert 查询。

您可以在生成查询之前添加以下行。

// create sql obj
...
var email = req.body.email;
var password = req.body.password;

...
// your query

Answer 2

您需要将中间件添加到您的 express 应用程序才能解析请求正文。

尝试将此添加到您配置 express 的文件中：

    app.use(express.json());

Answer 3

必须从 req 中检索电子邮件和密码字段

Answer 4

这不是一个完整的答案，但事实证明该问题与 CORS 有关。目前我不确定解决方案，但我很确定这是原因。

感谢您的帮助:)

Answer 5

大家好，感谢您的帮助。我通过在 server.js 中使用以下代码解决了这个问题

app.post("/admin-Add-Users", async (req, response) => {
  sql.connect(config, function(err) {
    if (err) {
      console.log(err);
      response.status(400);
      response.send(err);
    } else {
      try {
        // create Request object
        var request = new sql.Request();

        var body = req.body;

        console.log(body);

        if (body) {
          var email = body.email;
          var password = body.password;

          var queryString = `insert into Login (email,password) values ('${email}', '${password}')`;

          console.log(queryString);

          request.query(queryString, function(err, recordset) {
            console.log(err);
            response.status(400);
            // response.send(err);
          });

          response.status(201);
          response.send("User added ");
        } else {
          response.status(400);
          response.send("no content was provided");
        }
      } catch (e) {
        console.log(e);
        response.status(400);
        response.send(e);
      }
    }
  });
});