Löschaktion in reagiert mit axios

Question

In meinem Reagieren Anwendung, ich einen Rückruf mit einer Löschaktion gegen eine API auszuführen, um die axios Bibliothek:

deleteBook(selectedBook) { 
    return this.setState({selectedBook:selectedBook}) 
    axios.delete(this.apiBooks + '/' + this.selectedBook.id) 
    .then((res) => { 
     console.log(res) 
    }) 
    } 

ich eine Fehlermeldung in der Konsole: „Nicht erreichbar Code". Ich denke meine Syntax ist falsch. Ich möchte 2 Aktionen ausführen:

1) Einstellen des Status von selectedBook.

2) Löschen des Buchelements mit der Axios-Bibliothek-Löschmethode.

Answer 1

Die Rückkehr loswerden. Sie möchten zu diesem Zeitpunkt nicht von Ihrer Funktion zurückkehren. Sie wollen nur this.setState (...) dort. Das ist der Grund, warum Sie "unerreichbaren Code" erhalten, weil nichts unter der Rückkehr ausgeführt wird.

Auch würde ich die setState() nach axios erfolgreich zurückgibt. Sie wollen es wahrscheinlich nicht tun, wenn Axios fehlschlägt, da Ihr lokaler Zustand nicht widerspiegelt, was passiert, wenn das Löschen fehlschlägt. setState() bewirkt außerdem ein erneutes Rendern Ihrer Komponente. Daher ist es besser, dies nach Abschluss des API-Aufrufs zu tun.

Answer 2

Sie brauchen dort kein return. Weil Ihre Funktion Versprechen enthält (Axios) Sie können einen Rückruf setzen, wenn Sie wissen möchten, wann die Axios-Anfrage beendet ist.

deleteBook(selectedBook) { 
    const self = this 

    axios.delete(this.apiBooks + '/' + this.selectedBook.id).then((res) => { 
    console.log(res) 
    // we can update the state after response... 
    self.setState({selectedBook:selectedBook}) 
    }) 
}