通过 React 和 Node.js 将未定义的值传递给 MySQL 数据库

Question

我在 React 中的前端不断将未定义的值传递给 Node.js 中的后端服务器。我正在尝试创建一个注册容器，它将在数据库中创建一个帐户。

这是我的点击功能：

register(event) {
        event.preventDefault();

        let newUser = {
          name : this.state.name,
          password : this.state.password,
          email : this.state.email
        }
        Axios.post('http://localhost:2999/Join', newUser).then((response) => {
            console.log(response.data);

            if (response.data.success) {
                console.log("Successful Register");
                this.props.close();
            } else {
                console.log("Failed to Register");
                console.log(response.data.error);
            }
        });
    }

我目前已经设置了表单中每个框的状态通过 onChange 函数更新：

handleNameChange(event) {
        this.setState({name : event.target.value});
    }

    handlePwChange(event) {
      this.setState({password : event.target.value});
    }

    handleEmailChange(event) {
      this.setState({email : event.target.value});
    }

这是我的 Server.js 中的 POST 函数：

app.post('/Join', (req, res) => {
    const name = req.params.name;
    console.log(name);
    const password = req.params.password;
    console.log(password);
    const email = req.params.email;
    console.log(email);
    const REGISTER_USER_QUERY = `INSERT INTO users (name, password, email) VALUES ('${name}', '${password}', '${email}');`;
    connection.query(REGISTER_USER_QUERY, (err, results) => {
        if (err) {
            return res.send(err);
        } else {
            return res.send('Successfully registered player');
        }
    });
});

Answer 1

您应该使用来自req.body 的数据。 所以在你的代码中只需要改变：

app.post('/Join', (req, res) => {
    const name = req.body.name;
    console.log(name);
    const password = req.body.password;
    console.log(password);
    const email = req.body.email;
    console.log(email);
    const REGISTER_USER_QUERY = `INSERT INTO users (name, password, email) VALUES ('${name}', '${password}', '${email}');`;
        connection.query(REGISTER_USER_QUERY, (err, results) => {
        if (err) {
           return res.send(err);
        } else {
           return res.send('Successfully registered player');
      }
  });
});

从 url 传递参数时应该使用req.params。 假设你想从 id 为 1000 的用户那里获取数据。

你的路线是：

app.get('/user/:id', (req, res) => {
    const id = req.params.id
    res.json({userid: id})
})

在上面的例子中，如果你在路由http://localhost:3000/user/1000发出请求

我们有回应：

{userid: 1000}

Answer 2

你如何调用输入中的每个“handleChange”？

你应该这样做：

handleNameChange = event => this.setState({name: event.target.value})

<input value={this.state.name} onChange={this.handleNameChange} />

检查两件事：您正在从输入中正确调用 onChange，并且您正在使用 handleNameChange 中的箭头函数，或者您正在绑定到类组件的构造函数中的 handleNameChange。