Question

我正在尝试为项目管理网站构建喜欢的帖子（任务/评论）。我当前的逻辑是，使用用户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)

        }
    }

like函数

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})
}

render（）函数

<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

Answer 1

我认为您可以重构它以使逻辑更简单，并解决您具体描述的问题。

渲染喜欢的按钮时-您希望将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
}

我会编写代码，但是如果没有数据结构的示例，这很困难。

在React上构建喜欢的帖子功能

1 个答案: