Javascript 通过作为props传递的方法从状态数组中删除元素

我有一个主要组件App.js，状态如下

  state = {
    cats: [
      { id: '1', name: 'Cat 1'},
      { id: '2', name: 'Cat 2'},
      { id: '3', name: 'Cat 3'},
    ],
    dogs: [
      { id: '1', name: 'Dog 1'},
      { id: '2', name: 'Dog 2'},
    ],
    birds: [
      { id: '1', name: 'Bird 1'},
    ]
  }

此外，在同一组件中，还有一个方法（现在只是安慰索引）和列出动物的导入组件。 方法：

JSX或返回：

<div>
  <AnimalList deleteAnimal={this.deleteAnimalHandler} animal={this.state.cats} />
  <AnimalList deleteAnimal={this.deleteAnimalHandler} animal={this.state.dogs} />
  <AnimalList deleteAnimal={this.deleteAnimalHandler} animal={this.state.birds} />
</div>

在AnimalList组件中，我映射道具并呈现列表

{props.animal.map(({id, name}, index) =>
  <div key={id}><div>{name}</div><div onClick={() => props.deleteAnimal(index)}>Delete animal</div></div>
  )
}

{props.animal.map（{id，name}，index）=>
{name}props.deleteAnimal（index）}>删除动物
)
}

每次单击内容为“Delete animal”的div时，我都会执行deleteTaskHandler（）方法，并在控制台中记录数组中该元素的索引

我试图做的当然不是登录到控制台，如果不是，当我单击该div时，删除state的特定属性中具有传递索引的元素

因此，如果我单击Cat2下面的Delete animal，我应该从cats数组中删除Cat2。狗和鸟也一样

我找不到让处理程序知道哪个是上下文或者哪个应该是setState（）应该更新的数组的逻辑

---

有人能帮我吗？谢谢

您也需要通过动物分类

deleteAnimalHandler = (index,category) => {
      let temp = JSON.parse(JSON.stringify(this.state))
      temp[category] = temp[category].filter(({id})=> id !== index )

     // you can set state now
}

在这里您可以传递类别的名称

{props.animal.map(({id, name}, index) =>
  <div key={id}><div>{name}</div><div onClick={() => props.deleteAnimal(index,this.props.category)}>Delete animal</div></div>
  )
}

{props.animal.map（{id，name}，index）=>
{name}props.deleteAnimal（索引，this.props.category）}>Delete animal
)
}

您可以传递动物类型

并添加到单击

onClick={（）=>props.deleteAnimal（索引，this.props.animalType）

并实现

deleteAnimalHandler

deleteAnimalHandler = (index, animalType) => {
    let newAnimals = this.state.animals[animalType].filter((x, i) => i != index)
    let newState = {}
    newState[animalType] = newAnimals
    this.setState(newState)
}

---

代码狂人非常感谢。我没有正确地表达。我的疑问是，如果我必须通过类别或动物下来做类似的事情：谢谢。类别从哪里来？你忘了说你通过了哪里it@Peter您应该将其传递给函数

onClick={（）=>props.deleteAnimal（索引，类别）}

whilemapping@Vencovsky我在你评论mate之前已经添加了几秒钟：）如果你运行最后一段代码，类别将被取消定义，你需要从

this.props.category

deleteAnimalHandler = (index, animalType) => {
    let newAnimals = this.state.animals[animalType].filter((x, i) => i != index)
    let newState = {}
    newState[animalType] = newAnimals
    this.setState(newState)
}