我会按如下方式重写您的代码。

我将Form组件作为不受控制的组件。这意味着，当您更改时，表单输入将保持自己的内部状态。无需维护两个不同的数据源。所以我将依赖父组件App状态。我还添加了一个表单提交处理程序，它将在提交时获取输入值，然后调用addPersonfrom 方法App将名称添加到people由根组件维护的状态App。

我添加了deletePerson从列表中删除人员的方法。这是 2 个组件的样子。

deletePerson这里的方法依赖于人员列表将包含具有uniq电子邮件的人员这一事实。正如你也选择它作为keyprops。但是您可以随时更改此标准，如果您了解代码的当前流程，这将很容易。

应用程序.js

import React, { Component } from "react";
import Form from "./Form";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      people: []
    };

    this.addPerson = this.addPerson.bind(this);
    this.deletePerson = this.deletePerson.bind(this);
  }

  addPerson(name, email) {
    this.setState(prevState => ({
      people: [...prevState.people, { name, email }]
    }));
  }

  componentDidMount() {
    this.getPeople();
  }

  getPeople() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(response => this.setState({ people: response }))
      .catch(error => console.log(error));
  }

  deletePerson(email) {
    return () => {
      this.setState(prevState => ({
        people: prevState.people.filter(person => person.email !== email)
      }));
    };
  }

  render() {
    console.log(this.state);

    return (
      <div className="App">
        <Form addPerson={this.addPerson} />
        <table>
          <thead>
            <tr>
              <th>LP</th>
              <th>USER</th>
              <th>EMAIL</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {this.state.people.map((person, index) => {
              return (
                <tr key={person.email}>
                  <th>{index + 1}</th>
                  <td>{person.name}</td>
                  <td>{person.email}</td>
                  <td>
                    <button onClick={this.deletePerson(person.email)}>
                      Delete
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

表单.js

import React, { Component } from "react";

class Form extends Component {
  constructor() {
    super();
    this.formSubmit = this.formSubmit.bind(this);
  }

  formSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const email = form.elements["email"].value;
    const name = form.elements["name"].value;
    this.props.addPerson(name, email);
    form.reset();
  }

  render() {
    return (
      <form onSubmit={this.formSubmit}>
        <input
          id="name"
          type="text"
          defaultValue=""
          placeholder="Name..."
        />
        <input
          id="email"
          type="text"
          defaultValue=""
          placeholder="Email..."
        />
        <input type="submit" value="submit" />
      </form>
    );
  }
}

export default Form;

请检查Codesandbox演示。

您必须为您的 App 组件创建一个 deletePerson 函数，然后将 deletePerson 和 addPerson 作为props传递给您的 Form 组件，如下所示：

<Form addPerson={this.addPerson} deletePerson={this.deletePerson} />

然后在您的 Form 组件中使用它们。