遇到问题：this.setState 不是函数

Question

我遇到了一个问题，当我运行我的应用程序时无法输入文本，因为“this.setState 不是一个函数”。我在练习react.js.

我不知道这里的问题，我是新手，不知道如何使用 bind 来克服这个问题，所以我决定在这里问。史上第一个 post！

未捕获类型错误：this.SetState 不是函数

constructor(props){super(props);
    this.state = {
        db: '',
        username: '',
        fullname: '',
        phonenumber: '',
        dob: ''



    }  
    this.interface = this.interface.bind(this);


}

componentDidMount(){
  
    this.setState({
        db: StartFirebase()
    });
}

render(){
    return(
    
        <>
        <label>Enter Username</label>
        <input type='text' id="userbox" value={this.state.username} 
        onChange={e => {this.SetState({username: e.target.value});}}/>
        <br></br>

        <label>Enter Fullname</label>
        <input type='text' id="namebox" value={this.state.username} 
        onChange={e => {this.SetState({username: e.target.value});}}/>
        <br></br>

        <label>Enter Phonenumber</label>
        <input type='text' id="phonebox" value={this.state.username} 
        onChange={e => {this.SetState({username: e.target.value});}}/>
        <br></br>

        <label>Choose Day of Birth</label>
        <input type='text' id="datebox" value={this.state.username} 
        onChange={e => {this.SetState({username: e.target.value});}}/>
        <br></br>

        <button id="addBtn" onClick={this.interface}>Add Data</button>
        <button id="updateBtn" onClick={this.interface}>Update Data</button>
        <button id="deleteBtn" onClick={this.interface}>Delete Data</button>
        <button id="SelectBtn" onClick={this.interface}>Get Data from DB</button>

        
        </>
    )
}

interface(event){
    const id = event.target.id

    if(id=='AddBtn'){
        this.insertData();
    }

    else if(id=='updateBtn'){
      //  this.insertData();
     
    }
    else if(id=='DeleteBtn'){
      //  this.insertData();
     
    }
    else if(id=='selectBtn'){
       // this.insertData();
     
    }
}

GetAllInputs(){
    return {
        username: this.state.username,
        name: this.state.fullname,
        phone: Number(this.state.phonenumber),
        dob: this.state.dob
    }
}

Answer 1

尝试将 SetState 更改为 setState

constructor(props){super(props);
    this.state = {
        db: '',
        username: '',
        fullname: '',
        phonenumber: '',
        dob: ''



    }  
    this.interface = this.interface.bind(this);


}

componentDidMount(){
  
    this.setState({
        db: StartFirebase()
    });
}

render(){
    return(
    
        <>
        <label>Enter Username</label>
        <input type='text' id="userbox" value={this.state.username} 
        onChange={e => {this.setState({username: e.target.value});}}/>
        <br></br>

        <label>Enter Fullname</label>
        <input type='text' id="namebox" value={this.state.username} 
        onChange={e => {this.setState({username: e.target.value});}}/>
        <br></br>

        <label>Enter Phonenumber</label>
        <input type='text' id="phonebox" value={this.state.username} 
        onChange={e => {this.setState({username: e.target.value});}}/>
        <br></br>

        <label>Choose Day of Birth</label>
        <input type='text' id="datebox" value={this.state.username} 
        onChange={e => {this.setState({username: e.target.value});}}/>
        <br></br>

        <button id="addBtn" onClick={this.interface}>Add Data</button>
        <button id="updateBtn" onClick={this.interface}>Update Data</button>
        <button id="deleteBtn" onClick={this.interface}>Delete Data</button>
        <button id="SelectBtn" onClick={this.interface}>Get Data from DB</button>

        
        </>
    )
}

interface(event){
    const id = event.target.id

    if(id=='AddBtn'){
        this.insertData();
    }

    else if(id=='updateBtn'){
      //  this.insertData();
     
    }
    else if(id=='DeleteBtn'){
      //  this.insertData();
     
    }
    else if(id=='selectBtn'){
       // this.insertData();
     
    }
}

GetAllInputs(){
    return {
        username: this.state.username,
        name: this.state.fullname,
        phone: Number(this.state.phonenumber),
        dob: this.state.dob
    }
}

遇到问题：this.setState 不是函数

Having problem: this.setState is not a function

javascript

reactjs