有問題：this.setState不是函式

我遇到了一個問題，我在運行我的應用程式時無法輸入文本，因為“this.setState 不是函式”。我正在練習 react.js。

我不知道這里的問題，我是新手，無法弄清楚如何使用 bind 來克服這個問題，所以我決定在這里問。有史以來第一次發帖！

未捕獲的 TypeError：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
    }
}

uj5u.com熱心網友回復：

嘗試將 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
    }
}

標籤：javascript 反应

上一篇：查找陣列中的最低和最高數字值

下一篇：如何通過點擊搜索結果添加多張卡片