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

React this.setState仅在函数的第二次调用时才是函数

1 个答案: