即使使用箭头函数，React 也无法读取 .then() 中未定义的属性 setState

Question

Not sure what I'm doing wrong. I know that I'm not able to access the proper this, but I thought using arrow function resolves that. my console.log(this) returns undefined.

handleSubmit(event) {
    event.preventDefault();
    const formData = {
        username: event.target.username.value,
        password: event.target.password.value
    }
    fetch('http://localhost:4000/user/login', {
        method: "POST",
        mode: "cors",
        body: JSON.stringify(formData),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then((res) => res.json())
    .then((res) => {
        if(res.token == undefined) {
            console.log(this)
            this.setState({ logFailureMsg: res.message })
        } else {
            localStorage.setItem('authorization', `Bearer ${res.token}`);
        }

    })
    .catch(err => console.error(err)) 
}

Answer 1

This is not an arrow function. Change your function to look like this:

handleSubmit = event => {
    // your code...
}

Also, remember to call your function as this.handleSubmit , otherwise this will not be bound.