[英]How to send form data from React to express
我在React中相當新。 我正在嘗試將來自提交的注冊數據發送到我的后端。 我嘗試過傳統方法,比如在表單中設置post方法和路由,但這似乎不起作用。 有沒有辦法將數據發送到后端然后在前端接收數據?
后端路由:路由是localhost:4000 / api / users / register
router.post("/register", (req, res) => {
console.log(req.body)
console.log('Hit')
knex.select('*')
.from('users')
.where('email', req.body.email)
.then(function(results) {
knex('users')
.insert([{
first_name: req.body.first_name,
last_name: req.body.last_name,
phone: req.body.phone,
email: req.body.email,
password: bcrypt.hashSync(req.body.password, 15)
}])
.returning('id')
.then(function(id) {
req.session.user_id = id;
})
.catch(function(error) {
console.error(error)
});
}
})
.catch(function(error) {
console.error(error)
});
// }
});
反應表單代碼:
class Register extends Component {
constructor(props) {
super(props)
this.state = {
first_name: '',
last_name: '',
email: '',
password: '',
phone: ''
}
}
onChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
}
onSubmit = (e) => {
e.preventDefault();
// get form data out of state
const { first_name, last_name, password, email, phone } = this.state;
fetch('http://localhost:4000/api/users/register' , {
method: "POST",
headers: {
'Content-type': 'application/json'
}
.then((result) => {
console.log(result)
})
})
}
render() {
const { classes } = this.props;
const { first_name, last_name, password, email, phone } = this.state;
return (
<div className="session">
<h1>Create your Account</h1>
<div className="register-form">
<form method='POST' action='http://localhost:4000/api/users/register'>
<TextField label="First Name" name="first_name" />
<br/>
<TextField label="Last Name" name="last_name" />
<br/>
<TextField label="Email" name="email" />
<br/>
<TextField label="Password" name="password" />
<br/>
<TextField label="Phone #" name="phone" />
<Button type='Submit' variant="contained" color="primary">
Register
</Button>
</form>
</div>
</div>
);
}
}
export default Register;
您尚未將數據發布到api。 編碼錯誤也很少。 您需要更新代碼
fetch('http://localhost:4000/api/users/register' , {
method: "POST",
headers: {
'Content-type': 'application/json'
}
.then((result) => {
console.log(result)
})
至
fetch('http://localhost:4000/api/users/register' , {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(this.state)
})
.then((result) => result.json())
.then((info) => { console.log(info); })
您必須將state
的數據發送到服務器,並且必須對來自fetch
的響應使用json
方法才能訪問它。
fetch('http://localhost:4000/api/users/register', {
method: "POST",
headers: {
'Content-type': 'application/json'
},
body: JSON.stringify(this.state)
})
.then((response) => response.json())
.then((result) => {
console.log(result)
})
嘗試使用名為axios
的酷庫。 這將是低調的解釋。
在前端,您將使用axios將數據發布到您的后端:
const reactData = [{ id: 1, name:' Tom'}, { id: 2, name:' Sarah'}];
const url = localhost:4000/api/users/register;
let sendData = () => {
axios.post(url, reactData)
.then(res => console.log('Data send'))
.catch(err => console.log(err.data))
}
在后端,您將收到該數據,只需執行以下操作:
const url = localhost:4000/api/users/register;
const usersData= [];
let getData = () => {
axios.get(url)
.then(res => usersData.push(res.data))
.catch(err => console.log(err.data))
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.