Wert aus Status entfernen (neuen Status festlegen)

Question

Ich versuche, einen Wert aus meinem Status zu entfernen.

Ich benutze .filter, wie ich glaube, dies ist der einfachste Weg, es zu tun. Ich möchte auch eine undo Funktion implementieren (aber das ist außerhalb des Umfangs dieser Frage).

Ich habe diesen Code in einer Sandbox setzen https://codesandbox.io/s/yrwo2PZ2R

class App extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     movies: x.movies, 
    }; 
    } 
remove = (e) => { 
    e.preventDefault(); 
    console.log('remove movie.id:', e.target.value) 
    const index = e.target.value 
    this.setState({ 
    movies: this.state.movies.filter((_, e) => e.id !== index) 
    }); 
} 
    render() { 
    return (
     <div> 
     {this.state.movies.map(e => 
      <div key={e.id}> 
      <li>{e.name} {e.id}</li> 
      <button value={e.id} onClick={this.remove}>remove</button> 
      </div>, 
     )} 
     </div> 
    ); 
    } 
} 

Answer 1

Zwei Probleme löschen.

Zunächst ist der Index, den Sie vom Ereigniszielwert erhalten, eine Zeichenfolge, aber Sie vergleichen mit einer Zahl. Ändern Sie den Index Erklärung wie folgt:

const index = Number(e.target.value); 

Zweitens Ihre Filter ein wenig ausgeschaltet ist. Dies funktioniert:

this.state.movies.filter(movie => movie.id !== index) 

Answer 2

Sie das gleiche auf die folgende Weise erreichen können

remove = (e) => { 
    e.preventDefault(); 
    console.log('remove movie.id:', e.target.value) 
    const index = e.target.value 
    var movies = [...this.state.movies] 
    var idx = movies.findIndex((obj) => obj.id === parseInt(index)) 
    movies.splice(idx, 1); 

    this.setState({ 
    movies 
    }); 
} 

Auch ParseInt verwenden Index in eine Zeichenfolge zu konvertieren, bevor verglichen wird. Das direkte Festlegen des aktuellen Status aus den vorherigen Statuswerten kann zu Problemen führen, da setState asynchron ist. Sie sollten idealerweise eine Kopie des Objekts erstellen und das Objekt mit Splice-Methode

CODESANDBOX

Answer 3

Das Problem ist index String-Typ, aber id in Objekte hat number Typ. Sie benötigen Typumwandlung, zum Beispiel:

const index = Number(e.target.value); 

Other than that, Sie haben etwas falsch _ in Rückruf von filter Funktionsaufruf. Du brauchst es nicht. Sie benötigen:

this.state.movies.filter(e => e.id !== index) 

Übrigens empfehle ich nicht, Werte auf diese Weise zu benennen. Warum e? Sie haben eine Reihe von Filmen. Verwenden Sie movie. Warum index? Sie müssen ID entfernen. Dann verwenden Sie idToRemove Name.

Sie haben auch Probleme beim Hinzufügen von Elementen.

Zum einen können Sie Elemente wie folgt hinzu:

this.setState({ 
    movies: [...this.state.movies, { name: item.value.name, id: item.value.id }], 
}) 

Ein weiterer Punkt: Sie id AUTOINCREMENT haben. Sie können den letzten Wert in einer Variablen speichern. this.idCounter zum Beispiel. Und fügen Sie wird wie folgt aussehen:

this.setState({ 
    movies: [...this.state.movies, { name: item.value.name, id: this.idCounter++ }], 
}) 

Beispiel: https://codesandbox.io/s/2vMJQ3p5M