So entfernen Sie das Element aus dem Status mithilfe des Schlüssels

Question

Ich möchte ein Element aus dem Status entfernen.

Ich habe die key ID (als this.props.result._id), die löschen möchten.

Ich möchte diese Funktion als Ergebnis der .then in der fetch (trash Funktion) ausführen möchten.

Wie kann dies erreicht werden?

class Data extends React.Component { 
    render(){ 
    const { hits } = this.props 
    this.components = [] 
    return (
     <div> 
     {hits.map(hit => 
      <ItemResult ref={ref => this.components.push(ref)} 
      key={hit._id} result={hit} />)} 
     </div> 
    ) 
    } 
} 

class ItemResult extends React.Component { 
constructor(props) { 
    super(props); 
    this.deleteItem = this.deleteItem.bind(this); 
    this.state = { 
     item: props.result, 
    }; 
    } 
    deleteItem = event => { 
    // console.log('This gives undefined', item) 
    this.setState({ 
     item: [] 
    }) 
    } 
    render() { 
    return (
     <div> 
     <button onClick={this.deleteItem.bind(this)}> Delete </button> 
      <h2> This appears {this.props.result.title}</h2>    
    </div> 
    ); 
    } 
} 

Answer 1

Sie können den Schlüssel props nicht löschen. Es gibt zwei Wege in Ihrem Fall:

1. Anruf jeden Rückruf von Ihrer Stammkomponente (wo angeben Sie diese prop) und entfernen/ändern sie dort
2. aber es wird besser sein, wenn Sie diese Stütze palce in a state der Komponente. Dann wirst du in der Lage sein, damit zu arbeiten, wie du es wünschst und nicht an die Requisiten weiterzuleiten.

Answer 2

Schlüssel ist eher eine interne Reaktionseigenschaft. Wenn ich Sie wäre, würde ich wahrscheinlich eine dynamische ID für jedes der Elemente erstellen und dann diese spezifische ID adressieren, wenn ich versuche, sie zu entfernen.

class Data extends React.Component { 
    render(){ 
const { hits } = this.props 
this.components = [] 
return (
    <div> 
    {hits.map(hit => 
     <ItemResult ref={ref => this.components.push(ref)} 
     key={hit._id} id="{'hitNum' + hit._id}" result={hit} />)} 
    </div> 
    ) 
    } 
} 

class ItemResult extends React.Component { 
constructor(props) { 
    super(props); 

    this.state = { 
    }; 
    } 
    render() { 
    const { result } = this.props 
    return (
     <div key={result._id}> 
      <h1>{result._source.title}</h1> 
      <DeleteButon/> 
     </div> 
    ); 
    } 
} 

class DeleteButon extends React.Component { 
    constructor(props) { 
    super(); 
    this.state = { 
    } 
    } 

    trash() { 
    return fetch(DATA_API + this.props.result._id + '/', { 
    method: 'PUT', 
    body: JSON.stringify({deleted:true})}) 
     .then(function(res){ return res.json(); }) 
      //.then remove the id={'hitNum' + hit._id} it belongs to in ItemResult 
    } 
    render() { 
    return (
    <button className="trash" onClick={this.trash} > 
    Delete item # {this.props.result._id} 
    </button> 
    ); 
    } 
} 

Answer 3

Der idiomatische Weg, um das Problem der Änderung Ihrer Eltern mit React zu überliefern ist, einen Rückruf in Ihrer Komponente zu lösen.

Also, wenn die DeleteButton Komponente zu definieren, es könnte wie folgt aussehen:

<DeleteButton onDelete={() => console.log('handle delete')} /> 

Wenn Sie allerdings Props ändern wollen ..

Dann möchten Sie vielleicht einen auszulösen Wieder machen in der Elternteil mit verschiedenen Requisiten wird überliefert. So blüht React. Ein unidirektionaler Informationsfluss. Wenn das Entfernen einer ItemResult einen zentralen Status ändert, dann werden alle Requisiten von diesem zentralen Zustand abgeleitet, Sie können die Komponenten einfach neu rendern lassen und es wird eine neue Menge Requisiten haben, wobei die gewünschte ItemResult fehlt.

über .. Lesen

• Redux der Strom, idiomatische Weg ist, dieses Problem zu lösen: https://www.codementor.io/reactjs/tutorial/intro-to-react-redux-pros