Filter verwenden auf 'this' in Reactjs

Question

Das ist also meine Eltern-Klasse

class ComponentStart extends Component { 
    constructor() 
    { 
     super(); 
     this.count = 0; 
     this.state = {}; 
     this.repeats = []; 
    } 

    delete_this(index) 
    { 
     console.log("I am deleting"); 
     console.log(index); 
     this.repeats = this.repeats.filter((item) => item != index); 
     this.setState({ repeats: this.repeats }); 
    } 
    componentWillMount() 
    { 
     for (let i = 0; i < this.props.number; i++) 
     { 
      this.repeats.push(<StartMultiple key={this.count} id={this.count} delete_this={this.delete_this.bind(this)}/>);    
      this.count++; 
     }  
     this.setState({ repeats: this.repeats}); 
    } 

    componentHasMounted() 
    { 
    } 

    render() 
    { 
     return(
      <div> 
       {this.state.repeats} 

       <button onClick={this.add_repeat.bind(this, event)}>clickable</button> 
      </div> 
     ); 
    } 

Und das ist das Kind Klasse:

export default class StartMultiple extends Component { 
    constructor() 
    { 
     super(); 
     this.options = [ 1, 2, 3, 4, 5]; 
     this.temp_option = []; 
     this.delete_me = this.delete_me.bind(this); 
     this.buttons = [<button key="0" onClick={this.delete_me}/>,<button key="1" onClick={this.delete_me}/>]; 
     this.state = { buttons: this.buttons }; 
    } 

    ComponentDidMount() 
    { 
     $.ajax({ 
      url: "src/php/search.php?type=search", 
      dataType: "json", 
      success: (data) => 
      { 
       console.log(data); 
      } 
     }); 
    } 

    delete_this(value) 
    { 
     console.log(value); 
     this.props.delete_this(value); 
     return; 
    } 

    render() 
    { 
     console.log(this.props); 
     return(
      <div> 
       <input id={"input" + this.props.id} type="text"/> 
       <select> 
        {this.options.map(this.toOptions)} 
       </select> 
       <div> 
        I am some text 
       </div> 
       <div> 
        <button onClick={this.hide_info.bind(this)}>hide previous</button> 
        <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button> 
       </div> 

       {this.buttons} 
      </div> 
     ); 
    } 
} 

So was passiert ist, dass, wenn ich auf die Schaltfläche in StartMultiple klicken <button onClick={this.delete_this.bind(this, this)} ref={ (input) => { this.button = input; } } value={"hi"}>delete</button> wird es die delete_this Funktion des Elternteils auslösen (was es tut).

Also im Grunde funktioniert alles gut, wie ich es erwarte, außer für den Filterteil. Ich bin mir nicht sicher, warum es nicht filtern, obwohl sie die Komponente

Answer 1

Du vergleichst Reagieren Elemente, die Sie erstellen korrekt ist vorbei:

this.repeats.push(<StartMultiple ... delete_this={this.delete_this.bind(this)}/>);    

zu index, die this sein wird, die die Instanz von ComponentStart

this.repeats = this.repeats.filter((item) => item != index); 

this ist nicht das, was man erwarten würde, aber sehen nicht Elemente in einem Array, indem beispielsweise die Überprüfung React. Entfernen Sie Elemente aus einem Array nur mit Daten, z. B. durch Vergleichen einer ID oder eines Index im Array.