JS Spleiß funktioniert nicht richtig zum Entfernen React Component

Question

Mein Code besteht aus einer übergeordneten Komponente (Zeigen) und einer untergeordneten (bearbeitbaren) Komponente. Übergeordnetes Element enthält ein Array, in das untergeordnete Elemente verschoben werden. Ich füge einen Screenshot zur besseren Übersicht hinzu.

Ich bin ein Kind versucht, (ein Array-Element) unter Verwendung von splice() entfernen. Ich bin immer das Array korrekte Ausgabe auf Spleißen. Beispiel wie im Screenshot Wenn ich "neu" aus dem Array lösche mein Array arr = [dat2, dat3] aber im Frontend wird das letzte Element gelöscht und es wird dat2 angezeigt, neu in der unten gezeigten Weise. Beim Klicken auf Änderungen vornehmen Ich bekomme dat2 und dat3 nach Bedarf. Ich habe Spleißen mit dem richtigen Index gemacht, aber es scheint nicht richtig in der Benutzeroberfläche zu funktionieren.

Bitte helfen. Ich habe fast alles ausprobiert :(

Ich bin nur die Funktionen Weiterleitung erforderlich

Eltern-Code:.

handleMinus(id,idShow){ 

    this.state.Example=this.props.result.examples 
    this.state.Example.splice(id,1); 
    this.props.result.examples=this.state.Example; 
    this.setState({create:!this.state.create}) 


}; 

    render() { 
    var showExm = this.props.result.examples.map(function(result,index){ 
      console.log("EditableIntents") 
      return <div key={index}><EditableIntents 
            handleMinus={that.handleMinus} 
            result={result} 
            indexEg={index} 
            indexShowInt={that.props.index} 
            editExample={that.editExample}/> 
          </div> 
      }); 
    return({showExm}); 
} 

Kind:

render() { 
    return(
     <div> 
     <TextField 
       defaultValue={this.props.result} 
       hintText={this.props.result} 
       onChange= {this.changeEg} 
       id="editText" 
      /> 
      <span><IconButton id={"aa"+1} onClick={this.handleMinus} iconStyle={{width: 72, height: 72, float: -60}}><span><MinusIcon /> </span></IconButton></span> 
      </div> 
     ) 
    } 

handleMinus(){ 
    console.log(this.props.indexEg); 
    console.log("in Grand child:",this.props.result,this.props.indexEg); 
    this.props.handleMinus(this.props.indexEg,this.props.indexShowInt) 
    } 

Answer 1

Es wird Problem mit Ihrem Index sein kann,

Kind:

render() { 

    return(
     <div> 
     <TextField 
       defaultValue={this.props.result} 
       hintText={this.props.result} 
       onChange= {this.changeEg} 
       id="editText" 
      /> 

/* I have just changed here your onClick function */ 

      <span><IconButton id={"aa"+1} onClick={() => this.handleMinus(index)} iconStyle={{width: 72, height: 72, float: -60}}><span><MinusIcon /> </span></IconButton></span> 


      </div> 
     ) 

    } 

/*and here I have added parameter */ 

handleMinus(keyid){ 
    console.log(this.props.indexEg); 
    console.log("in Grand child:",this.props.result,this.props.indexEg); 
    this.props.handleMinus(keyid,this.props.indexShowInt) 
    } 

Also you should define "this.state.Example" as array 

handleMinus(id,idShow){ 

this.state.Example = []; 

    this.state.Example=this.props.result.examples 
    this.state.Example.splice(id,1); 
    this.props.result.examples=this.state.Example; 
    this.setState({create:!this.state.create}) 
}; 

Es kann Ihnen helfen.