时间戳

首页 > 解决方案 > 如何在反应中使用api从数据中删除图片

json - 如何在反应中使用api从数据中删除图片

问题描述

所以我正在尝试学习 api 并做这个很酷的项目。所以我所拥有的是我从这个 api 网站获取照片数据：https ://jsonplaceholder.typicode.com/

所以基本上我有一个按钮，它将根据帖子部分中的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;

标签： jsonreactjsapi

解决方案

好的，所以我希望您有一个按钮来删除帖子图像。

例如，当您单击按钮时，您正在调用 deleteImageFromAlbum() 方法。所以代码将是：

const deleteImageFromAlbum = photoID => {
  setUrl('')
  setPhoto(photos.filter(photo => photo.id !== photoID));
}

该filter方法更新数组并拍摄 id 不等于目标照片的所有照片。

推荐阅读