解雇reactjs中的项目的问题

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了解雇reactjs中的项目的问题相关的知识,希望对你有一定的参考价值。

我试图从我已经绘制出来的数组中删除一个项目。我制作了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带来的更新列表

答案

你的render方法使用animals(你的初始数据)而不是this.state.animals

以上是关于解雇reactjs中的项目的问题的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS - 是不是可以替换浏览器历史记录中的项目?

为报复公司解雇,我更改了项目的所有代码注释!

观察到的对象无意中被解雇 SwiftUI

2.ReactJS基础(虚拟DOM,JSX语法)

ios6中的解雇modalViewcontroller错误

“为报复公司解雇,我更改了项目的所有代码注释!”