Javascript 如何在react中从列表中删除项目

在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;

**App.js**
从“React”导入React，{useState}；
从“/data”导入数据；
从“/List”导入列表；
函数App（）{
const[people，setPeople]=useState（数据）；
返回(
{people.length}今天是生日！
setPeople（[]）}>清除生日
);
}
导出默认应用程序；

**List.js**
从“React”导入React；
常量列表=（{people}）=>{
返回(
{people.map（（person）=>{
const{id，name，age，image}=个人；
返回(
{name}
{age}

);
})}
);
};
导出默认列表；

我尝试在List.js中创建一个新函数和带有箭头函数的按钮，它像这样传入id

  const removeItem = (id) => {
    let newPeople = people.filter((person) => person.id !== id);
    setPeople(newPeople);
  };

<button onClick={() => removeItem(id}>Clear</button>

const removietem=（id）=>{
让newPeople=people.filter（（person）=>person.id！==id）；
setPeople（newPeople）；
};
removeItem（id}>清除

下面的重构代码工作解决方案

*** 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;

***App.Js***
从“React”导入React，{useState}；
从“/data”导入数据；
从“/List”导入列表；
函数App（）{
const[people，setPeople]=useState（数据）；
const removietem=（id）=>{
让newPeople=people.filter（（person）=>person.id！==id）；
setPeople（newPeople）；
};
返回(
{people.length}今天是生日！
setPeople（[]）}>清除生日
);
}
导出默认应用程序；

***List.js***
从“React”导入React；
const List=（{people，removietem}）=>{
返回(
{people.map（（person）=>{
const{id，name，age，image}=个人；
返回(
{name}
{age}

removeItem（id）}>清除
);
})}
);
};
导出默认列表；

---

请求对不同解决方案的评论。

只需将removeItem函数传递给列表组件：

return (
    <main>
      <section className="container">
        <h3>{people.length} birthdays today!</h3>
        <List people={people} removeItem={removeItem} />
        <button onClick={() => setPeople([])}> Clear Birthdays </button>
      </section>
    </main>
  );

返回(
{people.length}今天是生日！
setPeople（[]）}>清除生日
);

---

点击按钮后调用它，并将该人员的id传递给编辑标题的功能

，这是错误的，但我试图从列表中删除一个项目，目前可以删除所有项目。感谢得到的反馈！需要更多声誉才能投票。

*** 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;

return (
    <main>
      <section className="container">
        <h3>{people.length} birthdays today!</h3>
        <List people={people} removeItem={removeItem} />
        <button onClick={() => setPeople([])}> Clear Birthdays </button>
      </section>
    </main>
  );