Fetch在连续调用Reactjs时失败

Question

所以我是Javascript和React的新手，我正在尝试编写一个简单的登录页面，该页面接受登录表单数据，并向我创建的Django api发送登录请求。然后，api应该返回一个状态为200或401的HttpResponse。我在api中启用了CORS，这样它们就可以相互通信了。

我所发现的是，使用正确的登录信息，在服务器启动后的第一次尝试获取是成功的，但连续的登录尝试总是以"0"失败；类型错误：无法获取"；在浏览器控制台中。

我的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)

登录名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}/>
}
}

在浏览器的"网络"选项卡中，它显示提取状态为"取消"，可以在此处的屏幕截图中看到。我还在这里和这里附上了请求详细信息的截图。

Answer 1

使用this.render调用render方法是一种糟糕的做法，它可能会导致意外的bahavior。

当您使用this.setState设置状态时，组件会自动重新发送，您不需要调用this.render。

偶尔在极少数情况下，您应该使用forceUpdate((。

updateUser(email) {
console.log(`Entered User.updateUser, email: ${email}`);
this.setState({
email: email,
isLoggedIn: true
});
}

EDIT：不使用preventDefault可能会导致问题。看看这里。

handleSubmit(event) {
event.preventDefault();
const data = { email: this.state.email, password: this.state.password };
this.sendLoginRequest(JSON.stringify(data));
}

我在这里为你的问题做了一个github回购。我的代码与我嘲笑过的服务器正确工作。你可以用我的代码检查你的服务器，如果它再次不工作，那么你的服务器可能有问题。