2017-10-18 2 views
0

J'ai React.js dans le frontal et Express.js dans le back-end. En ce moment j'essaye de supprimer un message de React avec une demande de suppression et cela fonctionne mais je dois aller à l'URL et frapper l'entrée avant qu'il montre la nouvelle liste après la suppression. Je voudrais que la page soit rendue sans avoir à cliquer sur Actualiser.Le ré-rendu après l'envoi d'une demande de suppression dans la réaction ne fonctionne pas

class Rentals extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      completelist: [], 
      apiLoaded: false, 
     } 
     this.conditionalRentList = this.conditionalRentList.bind(this); 
     this.handleDeleteButton = this.handleDeleteButton.bind(this); 
     this.fetchAllRentals = this.fetchAllRentals.bind(this); 
    } 

    componentDidMount() { 
     this.fetchAllRentals(); 
    } 

    fetchAllRentals() { 
     fetch('api/listofrentals') 
      .then((res) => { 
       return res.json() 
      }) 
      .then((fullrental) => { 
       this.setState((prevState) => { 
        return { 
         completelist: fullrental.rentalsData, 
         apiLoaded: true 
        } 
       }) 
      }) 
    } 

    conditionalRentList() { 
     if (this.state.apiLoaded === true) { 
      return (
       <RentalsComp 
        completelist={this.state.completelist} 
        handleDeleteButton={this.handleDeleteButton} 
       /> 
      ); 
     } else { 
      return <p> Loading </p> 
     } 
    } 

    handleDeleteButton(idToBeDeleted) { 
     fetch(`api/listofrentals/${idToBeDeleted}`, { 
      method: 'DELETE' 
     }).then((res) => { 
      if (res.json === 200) { 
       this.fetchAllRentals(); 
      } 
     }) 
    } 

} 

la fonction handleDeleteButton devrait chercher toutes les annonces et le rendre sans avoir à rafraîchir car il appelle la fonction fetchAllRentals mais sa ne fonctionne pas pour une raison quelconque.

+1

Je me demande si votre 'this.setState' fonctionne réellement parce que la valeur de' this' n'est pas ce que vous attendez. Essayez de définir ceci à une variable en haut de votre fonction. par exemple 'fetchAllRentals() {var that = this' alors vous pouvez utiliser' that.setState' ... –

+2

Pouvez-vous vérifier ce que votre 'resp.json' est lorsque vous appelez l'API DELETE? – palsrealm

+0

bonjour, a découvert ce qui n'allait pas, voulait faire 'resp.status === 200' pour voir si cela passerait et ensuite récupérer. Je fais resp.json pour une raison quelconque. Merci – craftdeer

Répondre

0

Était supposé être resp.status === 200 mais faisait resp.json === 200 à la place.