javascript - 在 React 上构建帖子点赞功能
问题描述
我正在尝试为项目管理网站构建一个喜欢帖子(任务/评论)的功能。我当前的逻辑是,使用用户 ID、任务 ID 和一个布尔 taskLiked 变量来存储是否喜欢任务。
到目前为止,这就是我所拥有的
this.state = {
taskLikeInfo: [],
//an array containing taskId, userId, taskLiked boolean for each user who likes/unlikes a post
}
类似按钮的事件处理程序
handleClick(event) {
var tasks = this.state.taskLikeInfo;
const result = tasks.filter(task => ((task.taskId==this.props.activeTask)&&(task.userId==this.props.user.id)));
console.log('tasks,result:', tasks, result)
if (result.taskLiked===true)
{
this.unlikeTask(event)
}
else {
this.likeTask(event)
}
}
类似功能
likeTask(){
var taskId = this.props.activeTask;
var userId = this.props.user.id;
var tasks = this.state.taskLikeInfo;
tasks.push({ taskId, userId, taskLiked:true })
var destArray = _.uniq(tasks, function(x){
return x.taskId;
});
this.setState({taskLikeInfo : tasks})
}
不同的功能
unlikeTask(){
var taskId = this.props.activeTask;
var userId = this.props.user.id;
var tasks = this.state.taskLikeInfo;
this.props.unlikeTask(taskId,userId)
// _.uniq takes a json array and eliminates all repeating elements so that the final array can be used to count total unique likes on a post
var destArray = _.uniq(tasks, function(x){
return x.taskLiked;
});
destArray.map((task, index) => {
if((task.taskId==taskId)&& (task.userId==userId) && (task.taskLiked===true)){
//the user is clicking on an already liked comment which should toggle it
task.taskLiked=false;
}
})
this.setState({taskLikeInfo: destArray})
}
渲染()函数
<div className="like-task">
<a class="btn btn-sm" onClick={this.handleClick} data-taskid={this.props.activeTask} >
{ this.state.taskLikeInfo.map((task, index) => {
return (
<i className={"fa fa-" + ( task.taskLiked ? 'heart-o' : 'heart')} > </i>
);
}) }
Like
</a>
</div>
如果相同的评论被喜欢/不喜欢它正在工作
如果评论 A 被点赞,然后评论 B 被点赞,则评论 A 先被点赞,然后评论 B 被点赞(在同一次点击中)
有人可以修复我当前的代码或建议其他更清洁的工作。谢谢你。codepen 演示.. https://codepen.io/rafay-shahid/pen/dKwagV?editors=1011
解决方案
我认为您可以重构它以使逻辑更简单,并解决您具体描述的问题。
当您呈现您喜欢的按钮时 - 您希望将 taskID 与 handleClick 一起传递。
onClick={this.handleClick(this.props.activeTask)}
在您的 onClickHandler 内部:
handleClick(event, taskId) {
//if task is currently liked by user
//unlike it
//else like it
//update state with new likes
}
我会编写代码,但是如果没有数据结构的示例,这很困难。
推荐阅读
- amazon-web-services - 如何使用 SAM 通过 API Gateway 配置异步 lambda 调用?
- r - 对唯一值应用矢量化函数并展开
- asp.net-mvc - 我的数据库中客户端和用户之间的 SignalR 连接
- arrays - 如何使用 Ruby 连接数组中的字符串
- node.js - SyntaxError: Unexpected token / in JSON at position 324
- jquery - 删除特定的 html jquery
- python - 用户警告:在保存文件中找不到训练配置:模型*未*编译。手动编译
- tableau-api - Tableau 中的默认参数值
- pyspark - 我们可以从 aws Glue PySpark 作业触发 AWS Lambda 函数吗?
- html - 一致的社交媒体按钮