React this.setState不僅僅是函數的第二次調用時的函數

Question

我對React很陌生，並且已經創建了一個CRUD應用程序來創建讀取更新和刪除命令。在彈出框的同時，將用於更新我遇到的錯誤的特定命令：this.setState不是函數。該錯誤只出現在函數ChangeUpdateObject的第二次調用中，該函數更改彈出窗口中正在更新的命令。首次打開彈出窗口時，會選擇正確的命令，並在彈出窗口中顯示信息。 我希望這足以解決問題，但如果需要，我可以發佈更多內容。 以下是ChangeUpdateObject所在組件的代碼。

import React, { Component } from 'react'; 
import Commands from "./components/Commands"; 
import Header from "./components/Header"; 
import NewCommand from "./components/NewCommand"; 
import UpdateCommand from "./components/UpdateCommand"; 
import './App.css'; 
class App extends Component { 
    constructor(){ 
    super(); 
    this.state=({ 
     //current command that is going to be sent to handleAddCommand 
     currentCom:[], 
     //CurrentCom's arguments 
     currentArgs:[], 
     //Output of the APICall() 
     output:[], 
     //Command Arguments of the Update POPUP 
     UpdateArguments:[], 
     //Selected Command that is being Updated in the UPDATE POPUP 
     selectedUpdateObject:{}, 
     //Actual commands that are the responses of the command being UPDATED 
     selectedUpdateResponses:[] 
    }); 
    this.APICall=this.APICall.bind(this); 
    this.changeUpdateObject=this.changeUpdateObject.bind(this); 
    this.handleAddArgument=this.handleAddArgument.bind(this); 
    this.handleAddUpdateArgument=this.handleAddUpdateArgument.bind(this); 
    this.APICall(); 
    } 
    APICall(){ 
    //Gets all commands from API 
    var request = new XMLHttpRequest(); 

    request.open('GET', 'https://private-aa937-commandtable.apiary-mock.com/commands'); 

    request.setRequestHeader('x-api-version', '1'); 

    request.onreadystatechange = function() { 
     if (request.readyState === 4) { 
     var json = JSON.parse(request.responseText); 
     this.setState({ 
      output:json 
     }); 
     } 
    }.bind(this); 
    request.send(); 
    } 
    handleAddCommand(command){ 
    //Sends the command to the API 
    //needs work for formating the data to be sent 
    //So the data being sent isnt the same as data in API yet, need to be changed 
     let fullCommand=command; 
     let currentArgs=this.state.currentArgs; 
     delete currentArgs.id; 
     fullCommand.Arguments=currentArgs; 
     fullCommand= JSON.stringify(fullCommand) 
     console.log(fullCommand); 

     var request = new XMLHttpRequest(); 

     request.open('POST', 'https://private-aa937-commandtable.apiary-mock.com/commands'); 

     request.setRequestHeader('Content-type', 'application/json'); 
     request.setRequestHeader('x-api-version', '1.0'); 

     request.onreadystatechange = function() { 
     if (this.readyState === 4) { 
     console.log('Status:', this.status); 
     console.log('Headers:', this.getAllResponseHeaders()); 
     console.log('Body:', this.responseText); 
     } 
     }; 

     var body = fullCommand; 

     request.send(body); 
    } 
    handleAddArgument(Argument){ 
    //Adds an argument to the NewCommand tab 
    let Arguments= this.state.currentArgs; 
     Arguments.push(Argument); 
    this.setState({currentArgs:Arguments}); 
    } 
    handleAddUpdateArgument(Argument){ 
    let Arguments= this.state.UpdateArguments; 
    //console.log("this is Argument :" + Argument +". This is Arguments :"+Argument.Name); 
    Arguments.push(Argument); 
    console.log(Arguments); 
    this.setState({ 
     UpdateArguments:[] 
    }); 
    } 
    handleDeleteArgument(id){ 
    //Deletes an argument in the New Command Tab 
    let Arguments= this.state.currentArgs; 
    let index= Arguments.findIndex(x=> x.Id===id) 
    Arguments.splice(index,1); 
    this.setState({currentArgs:Arguments}); 
    } 
    handleDeleteUpdateArgument(id){ 
    //Deletes an argument in the Update POPUP 
    let Arguments= this.state.UpdateArguments; 
    let index= Arguments.findIndex(x=> x.Id===id) 
    Arguments.splice(index,1); 
    this.setState({UpdateArguments:Arguments}); 
    } 
    handleUpArgument(id){ 
    //Increases the position in the Arguments component in the New Command Tab 
    console.log("tried to up"); 
    let Arguments=this.state.currentArgs; 
    let index=Arguments.findIndex(x=>x.Id==id); 

    if(index>0){ 
    let placeholder1=Arguments[index-1]; 
    let placeholder2=Arguments[index]; 
    Arguments[index]=placeholder1; 
    Arguments[index-1]=placeholder2 
    this.setState({ 
     currentArgs:Arguments 
    }) 
    } 
    } 
    handleUpUpdateArgument(id){ 
    //Increases the position in the Arguments component of the Update POPup 
    console.log("tried to up"); 
    let Arguments=this.state.UpdateArguments; 
    let index=Arguments.findIndex(x=>x.Id==id); 

    if(index>0){ 
    let placeholder1=Arguments[index-1]; 
    let placeholder2=Arguments[index]; 
    Arguments[index]=placeholder1; 
    Arguments[index-1]=placeholder2 
    this.setState({ 
     UpdateArguments:Arguments 
    }) 
    } 
    } 
    handleDownArgument(id){ 
    // Decreases position of an argument in the Arguments component of the New Command tab 
    let Arguments=this.state.currentArgs; 
    let index=Arguments.findIndex(x=>x.Id==id); 
    if(index<(Arguments.length-1)){ 
    let placeholder1=Arguments[index+1]; 
    let placeholder2=Arguments[index]; 
    Arguments[index]=placeholder1; 
    Arguments[index+1]=placeholder2 
    this.setState({ 
     currentArgs:Arguments 
    }) 
    } 
    } 
    handleDownUpdateArgument(id){ 
    // Decreases position of an argument in the Arguments component of the Update POPUP 
    let Arguments=this.state.UpdateArguments; 
    let index=Arguments.findIndex(x=>x.Id==id); 
    if(index<(Arguments.length-1)){ 
    let placeholder1=Arguments[index+1]; 
    let placeholder2=Arguments[index]; 
    Arguments[index]=placeholder1; 
    Arguments[index+1]=placeholder2 
    this.setState({ 
     UpdateArguments:Arguments 
    }) 
    } 
    } 
    changeUpdateObject(id){ 
    //Changes the Command that is being updated in the Update popup 
    let UpdateObject=this.state.output[id-1]; 
    this.setState({ 
     selectedUpdateObject:UpdateObject 
    },()=>{ 
     console.log("I think it updated it"); 
     this.show("UpdateCommand"); 
    }); 
    } 
    SendResponses(Response,Arguments){ 
    //Sends the commands that are used as responses for the command being UPDATED in the Updtate POPUP 
    //Also sends the arguments to the UPDATE POPUP so they can be displayed, seems to not be working. 
    console.log(Arguments); 
    this.setState=({ 
     selectedUpdateResponses:Response, 
     UpdateArguments:Arguments 
    }); 
    } 
    show(id){ 
    //Shows the Update POPUP 
    document.getElementById(id).style.display="block"; 
    } 
    render() { 
    return (
     <div> 
     <UpdateCommand input={this.state.output} 
     Arguments={this.state.UpdateArguments} 
     Command={this.state.selectedUpdateObject} 
     addCommand={this.handleAddCommand.bind(this)} 
     addArgument={this.handleAddUpdateArgument.bind(this)} 
     deleteArgument={this.handleDeleteUpdateArgument.bind(this)} 
     upPosition={this.handleUpUpdateArgument.bind(this)} 
     downPosition={this.handleDownUpdateArgument.bind(this)} 
     Responses={this.state.selectedUpdateResponses} 
     /> 
     <Header/> 
     <NewCommand input={this.state.output} Arguments={this.state.currentArgs} 
     addCommand={this.handleAddCommand.bind(this)} 
     addArgument={this.handleAddArgument} deleteArgument={this.handleDeleteArgument.bind(this)} 
     upPosition={this.handleUpArgument.bind(this)} downPosition={this.handleDownArgument.bind(this)} 

     /> 
     <Commands input={this.state.output} 
     SelectUpdateObject={this.changeUpdateObject.bind(this)} 
     SendResponses={this.SendResponses.bind(this)}/> 

     </div> 
    ); 
    } 
} 

export default App; 

Answer 1

因爲你覆蓋了setState方法SendResponses方法，而不是調用它。你基本上將對象分配給它，這當然是你不想做的事情。這就是爲什麼你的第二個電話沒有達到預期的效果。 變化：

this.setState=({ 
    selectedUpdateResponses:Response, 
    UpdateArguments:Arguments 
}); 

到：

this.setState({ 
    selectedUpdateResponses:Response, 
    UpdateArguments:Arguments 
});