私はあなたのコードを次のように書き直します。

Formコンポーネントを制御されていないコンポーネントとして作成します。つまり、フォーム入力は、変更しても独自の内部状態を維持します。2つの異なるデータソースを維持する必要はありません。したがって、親コンポーネントのApp状態に依存します。また、送信時に入力値を取得するフォーム送信ハンドラーを追加し、addPersonからメソッドを呼び出して、ルートコンポーネントによって維持されAppているpeople状態に名前を追加しますApp。

deletePersonリストから人を削除するメソッドを追加しました。これが2つのコンポーネントのようです。

deletePersonここでの方法は、人のリストに一意の電子メールを持つ人が含まれるという事実に依存しています。あなたもkey小道具としてそれを選ぶように。ただし、この基準はいつでも変更できます。これは、コードの現在のフローを理解していれば簡単です。

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

Form.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デモを確認してください。