即使在定义绑定（this.submit）之后也无法读取未定义的属性“setState”答案

【问题标题】：Cannot read property 'setState' of undefined even after defining bind(this.submit)即使在定义绑定（this.submit）之后也无法读取未定义的属性“setState”
【发布时间】：2019-10-16 15:37:06
【问题描述】：

我一直在研究 react 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)
           })
      }

我确实有一个表格可以提供输入。有人可以帮我解决这个问题吗？

【问题讨论】：

handleChange 或 handleSubmit 中出现错误？
你需要将'signInWithEmailAndPassword(() => {})'的回调作为箭头函数。那么只有父/类“this”上下文可用。

标签： javascript reactjs firebase

【解决方案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)
       })
     }

这个作用域只在粗箭头函数 () => {} 内可用，所以我刚刚更新了你的函数

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

到

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

【讨论】：

现在直接跳到 catch(error) 语句。怎么了？
在函数的开头添加这一行 const {uid, email, password} = this.state;
是的，因为 uid 是一个状态变量抱歉我没有注意到，所以应该是 this.setState({ uid : result.user.uid })

【解决方案2】：

您可以使用箭头函数或将this 存储在另一个变量中。

方法一：

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)
    })
}

方法二

 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)
    })
}

【讨论】：

我按照第一种方法修改了代码。现在它显示 uid is not defined 。来自error 函数。我认为它跳过了结果函数。

【解决方案3】：

您需要将 const that = this; 作为 handleSubmit 方法的第一行并在函数中使用 that 而不是 this。

【讨论】：

【解决方案4】：

在 firebase signInWithEmailAndPassword 内的第二个 setState 方法中，您正在使用具有自己的 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 答案解释作为您的方法之一

【讨论】：

当然。感谢您的帮助:)

【解决方案5】：

为查询提供了实际答案。我想说的是，你可以使用箭头函数语法自动绑定函数。

例如

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)

【讨论】：

【解决方案6】：

如下更新您的 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)
       })
     }

【讨论】：