评论列表信息删除功能的实现

最新推荐文章于 2024-05-09 21:15:32 发布

野区小女王

最新推荐文章于 2024-05-09 21:15:32 发布

阅读量462

点赞数 17

文章标签：前端 react javascript vscode

本文链接：https://blog.csdn.net/weixin_58149434/article/details/137452521

版权

本文介绍了如何在React应用中实现删除评论的功能，通过useState管理状态，获取用户信息，使用filter方法过滤评论列表，当用户尝试删除与其uid匹配的评论时，执行删除操作并实时更新列表。

摘要由CSDN通过智能技术生成

需求：删除当前评论，并且在列表中不再显示

核心思路：拿到即将被删除的列表信息id,对列表进行filter过滤

1.定义渲染列表信息

2.添加渲染删除条件（如果当前登录用户信息的uid和渲染列表信息里的uid保持一致，那么就将删除字样渲染出来）

3.编写并绑定删除事件，因为涉及到删除方法传参事件，所以将绑定的删除事件写为箭头函数，并将列表信息的rpid作为参数传递，根据每条评论的rpid来删除当前评论

使用数组的filter方法来将渲染列表commentList进行过滤，由于在react中原始状态不能被修改，所以通过set函数来进行修改，所以使用了setCommentList方法来修改commentList状态变量，由此更新列表。

结果展示：

最后一条评论已被删除

所有代码展示：

App.js文件

import { useState } from 'react'

import './App.scss'

import avator from './images/avator.jpg'

//评论列表数据

const list = [

{

rpid: 1, //评论id

user: {

//用户信息

uid: '13258165',

avator: 'http://toutiao.itheima.net/resources/images/9.jpg',

uname: '周杰伦',

},

content: '哎呦，不错哦', //评论内容

ctime: '10-25 12:15', //评论时间

like: 88,

},

{

rpid: 2, //评论id

user: {

//用户信息

uid: '36080105',

avator: 'http://toutiao.itheima.net/resources/images/98.jpg',

uname: '许嵩',

},

content: '我寻你千百度，日出到迟暮', //评论内容

ctime: '04-12 08:45', //评论时间

like: 98,

},

{

rpid: 3, //评论id

user: {

//用户信息

uid: '30009257',

avator: 'http://toutiao.itheima.net/resources/images/56.jpg',

uname: '王心凌',

},

content: '或许失败过，但从未认输', //评论内容

ctime: '12-18 19:02', //评论时间

like: 120,

},

{

rpid: 4, //评论id

user: {

//用户信息

uid: '19858625',

avator: 'http://toutiao.itheima.net/resources/images/67.jpg',

uname: '徐凯',

},

content: '没有永远的敌人', //评论内容

ctime: '11-20 20:15', //评论时间

like: 120,

},

{

rpid: 5, //评论id

user: {

//用户信息

uid: '30009257',

avator: 'http://toutiao.itheima.net/resources/images/37.jpg',

uname: '杨幂',

},

content: '不只玫瑰有爱意', //评论内容

ctime: '11-20 20:15', //评论时间

like: 456,

},

{

rpid: 6, //评论id

user: {

//用户信息

uid: '30009257',

avator: 'http://toutiao.itheima.net/resources/images/28.jpg',

uname: '徐良',

},

content: '女骑士', //评论内容

ctime: '11-20 20:15', //评论时间

like: 253,

},

]

//当前登录用户信息

const user = {

//用户id

uid: '30009257',

//用户头像

avator,

//用户昵称

uname: '徐凯工作室',

}

//导航tab数组

const tabs = []

const App = () => {

const [commentList, setCommentList] = useState(list)

//删除事件

const deleteHandle = (id) => {

//根据id删除

setCommentList(commentList.filter((item) => item.rpid !== id))

console.log(id)

}

return (

<div className="app">

{/* 导航 Tab*/}

<div className="reply-navigation"></div>

<div className="reply-wrap">

{/* 发表评论 */}

<div className="box-normal"></div>

{/* 评论列表 */}

<div className="reply-list">

{/* 评论项 */}

{commentList.map((item) => (

<div className="reply-item" key={item.rpid}>

{/*头像 */}

<div className="root-reply-avator">

<div className="bili-avator">

<img

className="bili-avator-img"

alt=""

src={item.user.avator}

/>

</div>

</div>

<div className="content-wrap">

{/*用户名 */}

<div className="user-info">

<div className="user-name">{item.user.uname}</div>

</div>

{/*评论内容 */}

<div className="root-reply">

<span className="reply-content">{item.content}</span>

<div className="reply-info">

{/*评论时间 */}

<span className="reply-time">{item.ctime}</span>

{/*评论数量 */}

<span className="reply-count">点赞数：{item.like}</span>

{/*删除 */}

{/*删除条件 */}

{user.uid === item.user.uid && (

<span

className="reply-delete"

onClick={() => {

deleteHandle(item.rpid)

}}

>

{'删除'}

</span>

)}

</div>

</div>

</div>

</div>

))}

</div>

</div>

</div>

)

}

export default App

App.scss文件

.app {

width:100%;

height: 100%;

}

.reply-wrap{

height:100%;

background: url('./images/bg.jpg') no-repeat;

background-size: 100% 100%;

padding:20px;

.reply-item{

width:100%;

height: 130px;

display: flex;

justify-content: flex-start;

margin-top:10px;

.root-reply-avator{

width:5%;

.bili-avator{

.bili-avator-img{

width:60px;

height:60px;

border-radius:50%;

}

}

}

.content-wrap{

width:95%;

overflow: hidden;

border-bottom: 2px solid darkgray;

.user-info{

.user-name{

font-size: 16px;

color:darkgray;

font-weight: 500;

}

}

.root-reply{

margin-top:25px;

.reply-content{

font-size: 20px;

color:chocolate;

font-weight: 700;

}

.reply-info{

font-size: 14px;

color:darkgray;

font-weight: 500;

margin-top:15px;

.reply-time{

margin-right:25px;

}

.reply-count{

margin-right:25px;

}

.reply-delete{

cursor: pointer;

}

.reply-delete:hover{

color:cornflowerblue;

}

}

}

}

}

}