Блог

Я умею делать аксиомы.удалить, чтобы удалить элемент из моей базы данных. Но не будет обновляться немедленно, пока я не обновлю страницу или не перейду на другую страницу. вот полный компонент

 function GestImages() {
//load Data from db
 

загрузка данных работает нормально :

const [изображения, изображения]=useState([]) useEffect(()=>{ Axios.get(«http://localhost:4000/produit/images «) .затем(res=>{ setImages(res.data) }) .catch(err=>{ console.log(err.message) })

},[])

    // delete Data from db 
    const deleteImage=(id,e)=>{
      Axios.delete(`http://localhost:4000/produit/images/${id}`)
         .then((res)=>{
          setImages(prevImages => prevImages.filter(image =>  image.id !== id))
            
         })
         .catch(err=>{
           console.log(err.message)
         })
    }
    return (
       
        <div className="container">
            <div className="row row-a">
            <div className="col-lg-12 col-md-12 d-flex justify-content-between" style={{backgroundColor:'#000000'}}>
              <h1 className="justify-content-start" style={{color:'#FFFFFF'}}>Ajouter des images</h1>
            <Link to='/gest-images/add-images' style={{marginTop:"1%"}} ><button className="btn btn-primary justify-content-end">Ajouter</button></Link>
              </div>
              <div className="col-lg-12 col-md-12 ">
              
                <table className="table table-hover">
                  <thead>
                  <tr>
                  <th scope="col">Produit Name</th>
                  <th scope="col">Image</th>
                  <th scope="col">Action</th>
                </tr>
                  </thead>
                  <tbody>
                  {
                  images.map(images=>(
                  <tr key={images.id}>
                  <th>{images.produits.produitName}</th>
                  <td style={{width:"30%"}}><img src={"../../images/" images.pathImage} style={{width:"20%"}} alt="produit img"/></td>
                  <td><button className="btn btn-danger" onClick={(e)=>deleteImage(images.id)}>Supprimer <FontAwesomeIcon icon={faTrashAlt} style={{color:"#FFFFFF"}}/> </button> </td>
                  </tr>
                  ))
                  }
                  </tbody>
                  </table>
                                </div>
                              </div>
                              </div>
                      )
}

export default GestImages