Не удается прочитать свойство 'setState' из неопределенного, даже после определения привязки (this.submit)

Question

Я работал над реакцией js и хочу setState для ответа от firebase.
Поэтому, когда я пытаюсь установить значение для состояния, он возвращает ошибку,

Невозможно прочитать свойство 'setState' из неопределенного

Мой код.

class Login extends Component {
    constructor(props) {
        super(props)
        this.state = {email:'',
                    uid:'',
                    password :'',
        }
        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
        this.signInWithGoogle = this.signInWithGoogle.bind(this)
    }
    handleChange(event) {
        this.setState({
            [event.target.id] : event.target.value
        })
        console.log(this.state.email)
        console.log(this.state.password)
      }
      handleSubmit(e) {
        e.preventDefault()
        firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(result)  {
            console.log(result.user.uid)
            this.setState({ [uid]: [result.user.uid] });
        }).catch(function(error) {
            console.log(error.code)
            console.log(error.message)
            alert(error.message)
           })
      }

У меня есть форма для ввода. Может ли кто-нибудь помочь мне в этом.

Answer 1

Обновите функцию handleSubmit () следующим образом:

handleSubmit(e) {
       e.preventDefault()
       firebase.auth().signInWithEmailAndPassword(this.state.email, 
       this.state.password).then((result) => {
         console.log(result.user.uid)
         this.setState({ uid: result.user.uid });
       }).catch(function(error) {
         console.log(error.code)
         console.log(error.message)
         alert(error.message)
       })
     }

Answer 2

Фактический ответ был предоставлен на запрос. Я хочу сказать, что вы можете использовать синтаксис функции стрелки для автоматического связывания функций.

например,

handleSubmit = (e) => {
       e.preventDefault()
       firebase.auth().signInWithEmailAndPassword(this.state.email, 
       this.state.password).then((result) => {
         console.log(result.user.uid)
         this.setState({ uid: result.user.uid });
       }).catch(function(error) {
         console.log(error.code)
         console.log(error.message)
         alert(error.message)
       })
     }

Так что вам не придется писать

this.handleSubmit = this.handleSubmit.bind(this)

Answer 3

во втором методе setState внутри firebase signInWithEmailAndPassword вы используете анонимную функцию, которая имеет собственную область действия this. поэтому this.setState будет принимать ссылку внутри самой функции, а не класса this. Чтобы убедиться, что ваш setState получает лексический this класса, вы должны использовать функцию стрелки:

  firebase
   .auth()
   .signInWithEmailAndPassword(this.state.email, this.state.password)
   .then((result) => { // arrow function used
        console.log(result.user.uid)
        this.setState({ [uid]: [result.user.uid] });
   })

Вы также можете использовать объяснение ответа @Sukrut Bam в качестве одной из методологий

Answer 4

Вам нужно написать const that = this; в качестве первой строки в вашем методе handleSubmit и использовать that вместо this в вашей функции.

Answer 5

Пожалуйста, обновите вашу функцию handleSubmit следующим образом

      handleSubmit(e) {
       e.preventDefault()
       firebase.auth().signInWithEmailAndPassword(this.state.email, 
       this.state.password).then((result) => {
         console.log(result.user.uid)
         this.setState({ uid: result.user.uid });
       }).catch(function(error) {
         console.log(error.code)
         console.log(error.message)
         alert(error.message)
       })
     }

эта область доступна только внутри функции жирной стрелки () => {}, поэтому я только что обновил вашу функцию

firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(result)  {

до

firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((result) =>  {

Answer 6

Вы можете использовать функцию стрелки или сохранить this в другой переменной.

Метод 1:

handleSubmit(e) {
    e.preventDefault()
    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then((result) => {
        console.log(result.user.uid)
        this.setState({ [uid]: [result.user.uid] });
    }).catch(function(error) {
        console.log(error.code)
        console.log(error.message)
        alert(error.message)
    })
}

Метод 2

 handleSubmit(e) {
    e.preventDefault()
    let _this = this;
    firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(result)  {
        console.log(result.user.uid)
        _this.setState({ [uid]: [result.user.uid] });
    }).catch(function(error) {
        console.log(error.code)
        console.log(error.message)
        alert(error.message)
    })
}