Question

我正在尝试创建一个函数，该函数删除数组内对象的嵌套数组内的对象...

如何按日期删除其中一个时间表？

state = {
children: [
  {
    id: 1,
    firstName: 'Bella',
    lastName: 'Laupama',
    profile: 'child_care',
    schedules: [
      {
        date: '25 December, 2018',
        parent: 'Chris',
        activity: 'Christmas'
      },
      {
        date: '28 December, 2018',
        parent: 'Mischa',
        activity: 'Christmas with Malane Whanau'
      },
      {
        date: '31 December, 2018',
        parent: 'Laura',
        activity: 'New Years Eve'
      },
      {
        date: '1 January, 2019',
        parent: 'Laura',
        activity: 'New Years Day'
      }
    ]
  }
 ]
}

这样的作品行吗？...

delSched = (firstName, date) => {
  let children = [...this.state.children]
  let findChild = children.find(child => child.firstName == firstName)
  let newState = findChild.filter(sched => sched.date !== date)
  this.setState({
    children: newState
  })
}

更新：

尽管这些解决方案中的大多数都可能有效，但我可以使用的解决方案还是感谢@Marius。我使用了他代码的修改版本。

delSched = (firstName, date) => {
    var children = this.state.children

    for (var i = 0; i < children.length; i++) {
      var child = this.state.children[i]

      if (child.firstName == firstName) {
        //Loop through the schedules
        for (var k = 0; k < child.schedules.length; k++) {
          var schedule = child.schedules[k]

          //remove schedule if date == date
          if (schedule.date == date) {
            child.schedules.splice(k, 1)
          }
          this.setState({children})
        }
      }
    }
  }

Answer 1

您的固定代码：

delSched = (firstName, date) => {
  const children = state.children;
  const findChild = children.find(child => child.firstName === firstName)
  const newSched = findChild.filter(sched => sched.date !== date)
  findChild.schedules = newSched;
}

Answer 2

很好的循环。较新的Array原型很好，但并非所有地方都支持。再加上循环，您可以根据需要更改内容。

工作示例：

var state = {
  children: [
    {
      id: 1,
      firstName: 'Bella',
      lastName: 'Laupama',
      profile: 'child_care',
      schedules: [
        {
          date: '25 December, 2018',
          parent: 'Chris',
          activity: 'Christmas'
        },
        {
          date: '28 December, 2018',
          parent: 'Mischa',
          activity: 'Christmas with Malane Whanau'
        },
        {
          date: '31 December, 2018',
          parent: 'Laura',
          activity: 'New Years Eve'
        },
        {
          date: '1 January, 2019',
          parent: 'Laura',
          activity: 'New Years Day'
        }
      ]
    }
  ]
}

var children = state.children;

for (var i = 0; i < children.length; i++) {
  var child = state.children[i];

  if (child.firstName == "Bella") {

    //Loop through the schedules
    for (var k = 0; k < child.schedules.length; k++) {
      var schedule = child.schedules[k];

      //remove schedule if date == date
      if (schedule.date == "25 December, 2018") {
        child.schedules.splice(k, 1);
      }

    }

  }
}

console.log(state);

Answer 3

它应该可以工作，并且需要稍作修正：

delSched = (firstName, date) => {
  let children = [...this.state.children]
  let findChild = children.find(child => child.firstName == firstName)
  let newState = findChild;
  newState.schedules = newState.schedules.filter(sched => sched.date !== date)
  this.setState({
    children: newState
  })
}

您的findChild是包含schedules数组的对象，您需要更深入一层以获取该数组并在其上使用filter

Answer 4

您还可以通过执行以下操作使其更短：

let state = { children: [{ id: 1, firstName: 'Bella', lastName: 'Laupama', profile: 'child_care', schedules: [{ date: '25 December, 2018', parent: 'Chris', activity: 'Christmas' }, { date: '28 December, 2018', parent: 'Mischa', activity: 'Christmas with Malane Whanau' }, { date: '31 December, 2018', parent: 'Laura', activity: 'New Years Eve' }, { date: '1 January, 2019', parent: 'Laura', activity: 'New Years Day' } ] }] }

const delSchedule = (arr, name, date) => {
  let f = arr.find(x => x.firstName == name)	
  f.schedules = f ? f.schedules.filter(y => y.date != date) : f.schedules
}

this.setState({
  children: delSchedule(this.state.children, 'Bella', '1 January, 2019')
})

这种方式delSchedule不会修改状态，而是返回您在this.setState等中分配的新状态。

Answer 5

您可能搜索了类似的内容：

delSched = (firstName, date) => {
  let newChildren = this.state.children.map( child => {
    // don't modify other people
    if( child.firstName != firstName ) return child;

    // new object
    let newChild = {...child}
    // mutate schedule by date
    newChild.schedules = child.schedules.filter(sched => sched.date !== date)
    console.log(newChild);
    return newChild
  })
  this.setState({
    children: newChildren
  }, () => console.log(this.state.children) )
}

Working code

如何删除数组中对象的数组？

5 个答案: