为什么我创建的每个元素都会立即被删除？

Question

我正在制作联系人管理器（我已经将 App 作为 class 组件完成，现在我将 App 作为功能组件完成）并且每次我创建一个元素时，它都会被删除立即因为 removeElement 函数被立即调用...有人能告诉我为什么吗？

P.S。对不起我糟糕的英语...

this是代码的link

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

export default function App() {
  const [people, setPeople] = React.useState([]);
  const [person, setPerson] = React.useState({
    name: "",
    age: "",
    email: ""
  });

  const handleChange = (e) => {
    setPerson({ ...person, [e.target.name]: e.target.value });
  };

  const handleSubmit = () => {
    if (person.name && person.age && person.email) {
      const newPerson = { ...person, id: new Date().getTime().toString() };
      setPeople([...people, newPerson]);
      setPerson({ name: "", age: "", email: "" });
    }
  };

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

  const clearList = () => {
    setPeople([]);
  };

  return (
    <div className="container">
      <h1>React Contact Manager</h1>

      <div className="inputs">
        <input
          type="text"
          name="name"
          value={person.name}
          onChange={handleChange}
        />

        <input
          type="number"
          name="age"
          value={person.age}
          onChange={handleChange}
        />

        <input
          type="mail"
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </div>

      <button onClick={handleSubmit}>Add</button>

      <ul className="result">
        {people.map((person) => (
          <li key={person.id}>
            <h4>{person.name}</h4>
            <h6>{person.age}</h6>
            <span>{person.email}</span>
            <button onClick={removeItem(person.id)}>Remove</button>
          </li>
        ))}
      </ul>

      <div className="clear">
        <button onClick={clearList}>Clear</button>
      </div>
    </div>
  );
}

Answer 1

项目已删除，因为您在每次渲染时都执行此功能 - removeItem(person.id)。

变化：

<button onClick={removeItem(person.id)}>Remove</button>

至：

<button onClick={() => removeItem(person.id)}>Remove</button>

或者创建一个函数并将其分配给按钮：

const removePerson = () => {
   removeItem(person.id);
}
<button onClick={removePerson}>Remove</button>

为什么我创建的每个元素都会立即被删除？

Why every element I create gets deleted istantly?

state

function

call

reactjs