解雇reactjs中的项目的问题

Question

我试图从我已经绘制出来的数组中删除一个项目。我制作了onclick按钮，绑定它，并定义了该功能。但是，当我按下解除按钮时，项目仍然存在

我试图将我的对象id更改为不同的名称，更改一些代码。我甚至在console.log中查看我的按钮是否正常工作。它是。只是它没有删除预期的项目。

import React from "react";
import "./App.css";



const animals = [
  { id: 1, species: "Bear", habitat: "Mountains" },
  { id: 2, species: "Lion", habitat: "Sahari" },
  { id: 3, species: "Hippo", habitat: "Sahari" },
  { id: 4, species: "Eagle", habitat: "Trees" },
  { id: 5, species: "Fish", habitat: "River" },
  { id: 6, species: "Snake", habitat: "Desert" },
  { id: 7, species: "Alligator", habitat: "Everglades" },

];

class App extends React.Component {


  constructor(props) {
    super(props);

    this.state = {
      animals: animals
    }
    this.onDismiss = this.onDismiss.bind(this);
  }

onDismiss(id) {
  const isNotID = animal => animal.id !== id;
  const updatedList = this.state.animals.filter(isNotID);
  this.setState({animals: updatedList});
  console.log(this.state.animals)
}

  render() {
    return(
      <div className="App">
        {
          animals.map((animal)=> {
            return (
              <div key={animal.id}>
                <div>{animal.species}</div>
                <div>{animal.habitat}</div>
                <span>
                  <button onClick={()=>this.onDismiss(animal.id)}>Dismiss</button>
                </span>
              </div>
            )
          })
        }
      </div>
    );
  }
}

export default App;

我想按下解除按钮后删除该项目。并带回将从setState带来的更新列表