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

【问题标题】：Why every element I create gets deleted istantly?为什么我创建的每个元素都会被立即删除？
【发布时间】：2021-04-23 19:20:42
【问题描述】：

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

附：对不起我糟糕的英语......

this是代码的链接

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>
  );
}

【问题讨论】：

标签： reactjs function state call

【解决方案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>

【讨论】：