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（父组件）中移除任务，在我在映射当前项目状态时使用的reducers中。但该元素并未被删除。

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

有什么想法吗？

Answer 1

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

您编码：

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

这似乎是在抛弃新阵列 - 你不需要退回它，或类似的东西吗？

请注意：您对task.taskables.filter()的致电没有。

它不会改变task.taskables数组。它返回您未使用的结果。

Answer 2

你可以像下面这样做，以便它可以在不指定新数组的情况下移除项目，

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

从React组件中删除子组件？

2 个答案: