Question

在名为CompanyDashboard的React类中，有一个状态为data的对象数组3，每个对象都有一个timeslots键，该键保存一个时隙数组。 / p>

在CompanyDashboard内，我有一个名为CompanyPanel的功能组件，它吸收一家公司的价值，并将时隙显示为可疑项目列表。

当我单击其中任何一项时，我将从deleteTime执行称为CompanyDashboard的方法，该方法将作为道具传递给CompanyPanel，并带有name和{{1 }}作为参数。

我想从称为timeslot的状态中删除特定data的特定timeslot，我正在company方法中将其作为参数。

但是我不知道如何。

在无状态功能组件上，我有这个：

deleteTime

，然后在<span className='pa2 red pointer ma2 bg-white' onClick={() => deleteTime(timeslot, company)}>X</span>这个方法中：

CompanyDashboard

数据状态如下：

deleteTime (timeslot, company) {

// here i want to remove the specific timeslot from the spcific company from the state data
// and set it to this new state without that specific item inside that specific company

}

Answer 1

您应该为时间戳对象添加唯一的ID，这样它们就可以更容易区分和处理，但是现在，我们可以做到：


deleteTime (timeslot, company) {
 const newState = state.map(company=>{
    company.times.filter(time=>{
      return time.timestamp !== timeslot
    })
    return company
  })

  this.setState(newState) // or setState(newState) if you are functional 
}

Answer 2

我找到了答案，以为我认为可以用更简单的方法来完成，无论如何都可以：

  deleteTime (timeslot, name) {
    const newState = this.state.data.map(company => {
      if (name === company.name) {
        let newTimes = company.times.filter(time => {
          return time.dateUTCString !== timeslot.dateUTCString
        })
        company.times = newTimes
        return company
      }
      return company
    })
     this.setState({data: newState}) // or setState(newState) if you are functional 
  }

如何删除嵌套数组中的项目以作为反应状态传递

2 个答案: