javascript - 如何在反应中从列表中删除项目
问题描述
在 List.js 文件中,我试图从列表中删除每个项目
目前在 App.js 中,我在该部分中有一个按钮,可以通过传入一个空数组来删除所有生日。
**App.js**
import React, { useState } from "react";
import data from "./data";
import List from "./List";
function App() {
const [people, setPeople] = useState(data);
return (
<main>
<section className="container">
<h3>{people.length} birthdays today!</h3>
<List people={people} />
<button onClick={() => setPeople([])}> Clear Birthdays </button>
</section>
</main>
);
}
export default App;
**List.js**
import React from "react";
const List = ({ people }) => {
return (
<>
{people.map((person) => {
const { id, name, age, image } = person;
return (
<article key={id} className="person">
<img src={image} alt={name} />
<div>
<h4>{name}</h4>
<p>{age}</p>
</div>
</article>
);
})}
</>
);
};
export default List;
我尝试在 List.js 中创建一个带有箭头函数的新函数和按钮,它像这样传递 id
const removeItem = (id) => {
let newPeople = people.filter((person) => person.id !== id);
setPeople(newPeople);
};
<button onClick={() => removeItem(id}>Clear</button>
下面重构代码工作解决方案
*** App.Js ***
import React, { useState } from "react";
import data from "./data";
import List from "./List";
function App() {
const [people, setPeople] = useState(data);
const removeItem = (id) => {
let newPeople = people.filter((person) => person.id !== id);
setPeople(newPeople);
};
return (
<main>
<section className="container">
<h3>{people.length} birthdays today!</h3>
<List people={people} removeItem={removeItem} />
<button onClick={() => setPeople([])}> Clear Birthdays </button>
</section>
</main>
);
}
export default App;
*** List.js ***
import React from "react";
const List = ({ people, removeItem }) => {
return (
<>
{people.map((person) => {
const { id, name, age, image } = person;
return (
<article key={id} className="person">
<img src={image} alt={name} />
<div>
<h4>{name}</h4>
<p>{age}</p>
</div>
<button onClick={() => removeItem(id)}>Clear</button>
</article>
);
})}
</>
);
};
export default List;
征求对不同解决方案的意见。
解决方案
只需将您的 removeItem 函数传递给 List 组件:
return (
<main>
<section className="container">
<h3>{people.length} birthdays today!</h3>
<List people={people} removeItem={removeItem} />
<button onClick={() => setPeople([])}> Clear Birthdays </button>
</section>
</main>
);
并在单击按钮时调用它并将人员的 id 传递给函数
推荐阅读
- r - 前两列定义为“行名”
- java - 在 Android Studio 中,将 Java 代码粘贴到 Kotlin 文件中不再转换为 Kotlin
- kotlin - 乘法是否有 sumBy 等价物?
- oracle - ORA-01034: 从 Docker 官方镜像部署 oracle 时发生 ORACLE 不可用
- c# - 意外的 GC 行为?
- python-3.x - GCP 数据流流作业处理在步骤 s03 中卡住了至少 05m00s 没有输出或完成状态完成
- c# - 如何将参数传递给 Expression.New()?
- apache-camel - Camel中的递归调用
- ruby-on-rails - 在特定时间运行延迟作业
- android - 从底部拖动视图(隐藏状态)