TypeError this.setState не является функцией

Question

Я новичок в реакции, и у меня возникает эта проблема, вот мой конструктор:

 constructor(props){
 super(props)
 this.handleChange = this.handleChange.bind(this)
 this.state={
  user: {},
  email: "",
  password: ""
 }}

И когда я вызываю свой метод handleChange из ввода:

<Input name="email" type="email" placeholder="Email" 
        onChange={this.handleChange} />

. ..

handleChange(e){
this.setState({
  [e.target.name] : e.target.value
})}

Я получаю сообщение об ошибке:

this.setstate не является функцией

Кто-нибудь может помочь мне решить проблему, пожалуйста ?

Полный код компонента

 import React from "react";
 import { View, StyleSheet } from "react-native";
 import { Image, Button, Text, Input, Icon } from "react-native-elements";

 import * as firebase from 'firebase'
 import config from '../config'

 class SignIn extends React.Component {

   constructor(props){
     super(props)
     this.login = this.login.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.authListener = this.authListener.bind(this)
     this.state={
       user: {},
       email: "",
       password: ""
     }
     this.setState={
       users: {}
     }
     if (!firebase.apps.length) {
       firebase.initializeApp(config)
     }
   }

   authListener(){
     firebase.auth().onAuthStateChanged((user)=>{
       if(user){
         this.setState({user})
       }
       else{
         this.setState({user:null})
       }
     })
   }

   componentDidMount(){
     this.authListener()
   }

   login(e){
     console.log("Se connecter")
     e.preventDefault();
     firebase.auth().signInWithEmailAndPassword(this.state.email,                     
     this.state.password).then((u)=>{console.log(u)}).catch((err)=>                
    {console.log(err)})
  }

   handleChange(e){
     this.setState({
       [e.target.name] : e.target.value
     })
     console.log("Se Handlechange ")
   }

   render() {
     return (
       <View style={{ flex: 1 }}>
         <View style={styles.container}>
           <Image
             source={require("../Images/khouddwak.png")}
             style={{ height: 200 }}
           />
           <Text style={styles.titletxt}>Se Connecter</Text>
         </View>
         <View style={{ alignSelf: "center", marginTop: 50 }}>
           <View style={styles.viewtxt}>
             <Icon type="font-awesome" name="envelope" size={25} />
             <Input name="email" type="email" placeholder="Email" 
             onChange={(e) => this.handleChange(e)} />
           </View>
           <View style={styles.viewtxt}>
             <Icon type="font-awesome" name="lock" size={30} />
             <Input name="password" type="password" placeholder="Password" 
             onChange={(e) => this.handleChange(e)} />
           </View>
           <Button title="Se Connecter" type="outline" style={styles.buttons} 
           onPress={()=>this.login()} />
         </View>
         <View style={{ position: "absolute", left: 0, right: 0, bottom: 0 }}>
           <Image
             source={require("../Images/footerimage.png")}
             style={{ height: 50 }}
           />
         </View>
       </View>
     );
   }
 }

 export default SignIn;

Answer 1

ваша проблема здесь:

this.setState={
 users: {}
}

внутри конструктора вы переопределяете метод setState, поэтому это не функция, вы назначаете ему объект.

Answer 2

используйте стрелочную функцию в этом

handleChange=(e)=>{
this.setState({
  [e.target.name] : e.target.value
})}

не используйте строку привязки, удалите this.handleChange = this.handleChange.bind(this)

<Input name="email" type="email" placeholder="Email" 
       onChange={()=>this.handleChange} />

Надеюсь, это полезно для вас.