【发布时间】：2021-02-04 14:14:11
【问题描述】：
以下是注册模式正文的代码。我希望它的工作方式是用户输入凭据，当他们单击提交时，他们会自动转到作为他们的仪表板的路由“/secret”。
目前，当用户单击提交时，会引发错误并出现警报“（'登录时出错，请重试'）”。我只希望在他们的输入有错误时发生这种情况（即非唯一条目，未达到要求等）
无论输入是否满足要求并被推送到数据库，每次用户单击提交时都会引发此警报。同样由于某种原因，react 似乎忽略了将用户重定向到所需路线的代码行。
if (res.status === 200)
{ this.props.history.push('/secret');
}
如果我收到 res.status === 200，是否有办法重定向路由，同时如果发生错误，还能保持抛出错误的条件？
signup.js（模态体）
import React, { Component } from 'react';
import API from "../utils/API.js";
import { Container, Row, Col, Button, Alert, Modal, ModalHeader, ModalBody, ModalFooter, Label, Input } from 'reactstrap';
export default class Signup extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: '',
username: ''
};
}
handleInputChange = (event) => {
const { value, name } = event.target;
this.setState({
[name]: value
});
}
onSubmit = (event) => {
event.preventDefault();
API.signUpUser(this.state.email, this.state.username, this.state.password)
.then(res => {
if (res.status === 200) {
this.props.history.push('/secret');
} else {
const error = new Error(res.error);
throw error;
}
})
.catch(err => {
console.error(err);
alert('Error logging in please try again');
});
}
render() {
console.log(this.state)
return (
<form onSubmit={this.onSubmit}>
Email: <input
type="email"
name="email"
placeholder="Enter email"
value={this.state.email}
onChange={this.handleInputChange}
required
/>
<br></br>
<br></br>
Username: <input
type="text"
name="username"
placeholder="Enter username"
value={this.state.username}
onChange={this.handleInputChange}
required
/>
<br></br>
<br></br>
Password: <input
type="password"
name="password"
placeholder="Enter password"
value={this.state.password}
onChange={this.handleInputChange}
required
/>
<br></br>
<br></br>
<Button type="submit" value="Submit" color="primary" className="btn btn-warning">Sign Up</Button>
</form>
);
}
}
app.js（反应路线）
<Switch>
<Route path="/" exact component={Home} />
<Route path="/hometwo" exact component={Home2} />
<Route path="/secret" component={withAuth(Secret)} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route path="/signout" component={Signout} />
<Route path="/loggedIn" component={withAuth(loggedIn)} />
</Switch>
注册用户 API
signUpUser: function (email, username, password) {
const signUpURL = "/api/user"
// console.log("username " + username + "password " + password)
return axios.post(signUpURL, { email,username, password }).then(result => result.data);
// return axios.post(signUpURL, { email, username, password }).then(result => result.data);
// .then(result => result.data);
},
新 Signup.js
import React, { Component } from 'react';
import API from "../utils/API.js";
import { Container, Row, Col, Button, Alert, Modal, ModalHeader, ModalBody, ModalFooter, Label, Input } from 'reactstrap';
export default class Signup extends Component {
constructor(props) {
super(props)
this.state = {
email: '',
password: '',
username: '',
};
}
handleInputChange = (event) => {
const { value, name } = event.target;
this.setState({
[name]: value
});
}
onSubmit = (event) => {
event.preventDefault();
// API.signUpUser(this.state.email, this.state.username, this.state.password)
fetch('/api/authenticatesignup', {
method: 'POST',
body: JSON.stringify(this.state),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => {
console.log("THIS IS res " + JSON.stringify(res.status));
if (res.status === 200) {
// alert("You can now go to your dashboard")
// window.location.reload();
// // alert("You can now go to your dashboard")
this.props.history.push('/secret')
} else {
const error = new Error(res.error);
// console.log("This is error on client side " + error)
throw error;
// alert('Error logging in please try again');
}
})
.catch(err => {
console.error(err);
alert('Error logging in please try again');
});
}
render() {
console.log(this.state)
return (
<form onSubmit={this.onSubmit}>
Email: <input
type="email"
name="email"
placeholder="Enter email"
value={this.state.email}
onChange={this.handleInputChange}
required
/>
<br></br>
<br></br>
Username: <input
type="text"
name="username"
placeholder="Enter username"
value={this.state.username}
onChange={this.handleInputChange}
required
/>
<br></br>
<br></br>
Password: <input
type="password"
name="password"
placeholder="Enter password"
value={this.state.password}
onChange={this.handleInputChange}
required
/>
<br></br>
<br></br>
<Button type="submit" value="Submit" color="primary" className="btn btn-warning">Sign Up</Button>
</form>
);
}
}
服务器中注册的 API 端点
//authenticate checker signup
app.post('/api/authenticatesignup', function (req, res) {
const { email, username, password } = req.body;
User.create({
email: req.body.email,
username: req.body.username,
password: req.body.password
},
function (err, user) {
if (err) {
console.error(err);
res.status(500)
.json({
error: 'Internal error please try again'
});
}
else {
// Issue token
const payload = { username };
const token = jwt.sign(payload, secret, {
expiresIn: '1h'
});
res.cookie('token', token, { httpOnly: true })
.sendStatus(200);
console.log("New USER!" + req.body.email + req.body.password)
}
})
});
【问题讨论】：
-
似乎api调用有问题，这就是调用catch块的原因。检查你的控制台，控制台打印出什么错误
-
你能 console.log 响应吗？
-
如果它显示警报然后它应该打印一些东西到控制台，因为你有这个 console.error(err);你能显示控制台说什么吗？
-
如果不知道确切的错误和您的 api 端点就很难判断，而且看起来您在没有指定属性的情况下发送凭证信息：通常您发送一个对象，如下所示：@ 987654329@
-
您收到一个带有登录数据的普通对象，但您没有状态参数，这就是 if 语句跳过的原因
标签： reactjs react-router bootstrap-modal react-router-dom react-props