Question

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

就不同的解决方案征求意见。

Answer 1

只需将您的 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 传递给函数

如何从反应列表中删除项目

1 个答案: