所以我想学习api并做这个很酷的项目。所以我所拥有的是我从这个api网站获取的照片数据：https : //jsonplaceholder.typicode.com/
所以基本上我有一个buttom，它将基于posts部分中的albumId从api添加缩略图数据，当我按图像时，它将图像的URL发送到将其加载到顶部的函数。
所以我想要的是能够移除图片的顶部使其旁边具有这个红色的x，当我按它时，它将从上部以及帖子部分中删除。
到目前为止，我的代码：
const DataFetching = () =>{
const [photo,setPhoto] = useState([])
const[albumId,setAlbumId] = useState(1)
const[albumIdFromButtonClick,setAlbumAIdFromButtonClick] = useState(1)
useEffect(()=>{
axios.get(`https://jsonplaceholder.typicode.com/photos?albumId=${albumIdFromButtonClick}`)
.then(res =>{
console.log(res)
setPhoto(res.data)
})
.catch(err =>{
console.log(err)
})
},[albumIdFromButtonClick])
const handleClick = () => {
setAlbumAIdFromButtonClick(albumId)
}
const [Url,setUrl] = useState()
const showPicture = (url) => {
setUrl(url)
}
return(
<div>
<div><img src={Url}></img></div>
<div>Posts</div>
<p>enter album Id to see the magic</p><input type="text" value={albumId} onChange={e => setAlbumId(e.target.value)}></input>
<button type="button" onClick={handleClick}>Fetch Album</button>
<div className="container">
<div>{photo.map(p =>
<div key={p.id}>
<img src={p.thumbnailUrl} thumbnailUrl={p.thumbnailUrl} onClick={() => showPicture(p.url)}></img>
<div>{p.title}</div>
</div>
)}</div>
</div>
{/* {
photos.map(photo => <div key={photo.id}>{photo.title}</div>)
} */}
</div>
)
}
export default DataFetching;
好的，我希望您有一个按钮可以删除帖子图像。
例如，当您单击按钮时，您正在调用deleteImageFromAlbum（）方法。因此代码将是：
const deleteImageFromAlbum = photoID => {
setUrl('')
setPhoto(photos.filter(photo => photo.id !== photoID));
}
该filter方法更新数组，并拍摄所有ID不等于目标照片的照片。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句