如何解决连续调用Reactjs时提取失败
因此,我是Javascript和React的新手,我试图编写一个简单的Login页面,该页面接受登录表单数据并将登录请求发送到我创建的Django api。然后,该api应该返回状态为200或401的HttpResponse。我在api中启用了CORS,以便它们可以彼此通信。
我发现的是,使用正确的登录信息,在服务器启动后,首次尝试的获取成功,但是连续的登录尝试始终失败,并在浏览器控制台中显示“ TypeError:无法获取”。
我的Django API函数:
# path 'login/'
def login_user(request):
login_attempt = json.loads(request.body.decode('utf-8'))
try:
user = models.User.objects.get(email=login_attempt['email'],password=login_attempt['password'])
except models.User.DoesNotExist:
user = None
if user is not None:
return HttpResponse('Login Success',status=200)
return HttpResponse('Unauthorised',status=401)
Login.js:
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: '',password: '',};
this.handleEmailChange = this.handleEmailChange.bind(this);
this.handlePasswordChange = this.handlePasswordChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleResponse = this.handleResponse.bind(this);
}
handleEmailChange(event) {
this.setState({email: event.target.value})
}
handlePasswordChange(event) {
this.setState({password: event.target.value})
}
handleResponse(res) {
if (res.ok) {
alert('Login Successful!');
this.props.updateTheUser(this.state.email);
}
else if (res.status === 401) {
alert('Wrong Username or Password');
}
}
sendLoginRequest(data) {
fetch('http://localhost:8000/login/',{
method: 'POST',headers: { 'Content-Type': 'application/json'},body: data,})
.then(this.handleResponse)
.catch(function(error) {
alert('Server error,please try again.');
console.error(error);
});
}
handleSubmit(event) {
const data = `{"email": "${this.state.email}","password": "${this.state.password}"}`
this.sendLoginRequest(data);
}
User.js:
class User extends Component {
constructor(props) {
super(props);
this.state = {
email: '',isLoggedIn: false
}
this.updateUser = this.updateUser.bind(this);
}
updateUser(email) {
console.log(`Entered User.updateUser,email: ${email}`);
this.setState({
email: email,isLoggedIn: true
});
}
render() {
if (this.state.isLoggedIn) {
return <Dashboard/>
}
return <Login updateTheUser={this.updateUser}/>
}
}
在浏览器的“网络”选项卡中查找,它将获取状态显示为“已取消”,并且可以在屏幕快照here中看到。 我还提供了请求详细信息here和here的屏幕截图。
解决方法
使用this.render
调用render方法是一种不好的做法,并且可能导致意外的行为。
使用this.setState
设置状态时,该组件会自动重新渲染,您无需调用this.render
。
在极少数情况下,有时应使用forceUpdate()。
updateUser(email) {
console.log(`Entered User.updateUser,email: ${email}`);
this.setState({
email: email,isLoggedIn: true
});
}
编辑:不使用preventDefault可能导致问题。看here。
handleSubmit(event) {
event.preventDefault();
const data = { email: this.state.email,password: this.state.password };
this.sendLoginRequest(JSON.stringify(data));
}
我在here中为您的问题制作了一个github存储库。我的代码可以正确地与我嘲笑的服务器一起使用。您可以使用我的代码检查服务器,如果再次无法正常工作,则可能是服务器出了点问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。