从React组件中移除子组件

Question

我有一个json组件:

{
      "id": 138,
      "created_at": "2016-08-29T08:20:28+02:00",
      "updated_at": "2016-08-29T08:20:28+02:00",
      "title": "Some title.",
      "description": "",
      "employee": {
        "id": 500,
        "name": "Name,
        "title": "Code Monkey,
        "geo_code": "UK",
        "image": ""
      },
      "assigned_employee": {
        "id": 34,
        "name": "Nicolai",
        "title": "Developer",
        "geo_code": "uk",
        "image": ""
      },
      "status": {
        "id": 1,
        "name": "Pending",
        "color": "#FAFAFA"
      },
      "priority": {
        "id": 1,
        "name": "Low",
        "color": "#F56954",
        "rank": 0
      },
      "taskables": [
        {
          "id": 1,
          "created_at": "2016-08-22T17:07:33+02:00",
          "type": "partner",
          "partner": {
            "id": 652,
            "created_at": "2012-07-31T09:43:43+02:00",
            "name": "Beierholm",
            "geo_code": "UK",
            "city": "London",
          }
        },
        {
          "id": 2,
          "created_at": "2016-08-22T17:09:07+02:00",
          "type": "lead",
          "lead": {
            "id": 21211,
            "created_at": "2016-08-16T13:08:21+02:00",
            "name": "LeadName",
            "geo_code": "UK",
            "city": "London",
          }
        }
      ]
    },

我有一个事件，能够从DOM(父组件)中删除任务表，当我在状态中映射当前项目时，在reducer中我有这个。但是元素没有被删除。

if(task.id === action.task_id){
    if(task.taskables.length > 0) {
        task.taskables.filter(function(taskable){
            return taskable.id !== action.taskable_id;
        })
    }
}

任何想法?

Answer 1

你可以像下面这样做，这样它就可以在不分配新数组的情况下删除项，

if(task.id === action.task_id){
  if(task.taskables.length > 0) {
    return { taskables: task.taskables.filter(taskable =>
      taskable.id !== action.taskable_id
    )}
  }
}  

Answer 2

array. prototype.filter()返回一个新的数组。

你编码:

    if(task.taskables.length > 0) {
        task.taskables.filter(function(taskable){
        return taskable.id !== action.taskable_id;
    })

这似乎扔掉了新的数组-你不需要返回它，或类似的东西吗?

只是要清楚:您对task.taskables.filter()的呼叫没有。

不改变task.taskables数组。它返回一个您没有使用的结果。