连续调用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)

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存储库。我的代码可以正确地与我嘲笑的服务器一起使用。您可以使用我的代码检查服务器，如果再次无法正常工作，则可能是服务器出了点问题。

fetch javascript reactjs reactjs rest