import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [movie, setMovie] = useState();
  const [director, setDirector] = useState();
  const [list, setList] = useState([
    {
      movie: "",
      director: ""
    }
  ]);

  const handler = () => {
    setList([
      ...list,
      {
        movie: movie,
        director: director
      }
    ]);
    setDirector("");
    setMovie("");
  };
  const removeHandler = (del, index) => {
    const newList = list.filter((item) => {
     return item.movie !== del;
    });
   
    setList([newList]);
  };
  return (
    <div className="App flex justify-between">
      <div>
        <input value={movie} onChange={(e) => setMovie(e.target.value)} />
      </div>
      <div style={{ marginTop: "2rem" }}>
        <input value={director} onChange={(e) => setDirector(e.target.value)} />
      </div>
      <button style={{ marginTop: "2rem" }} onClick={handler}>
        ADD
      </button>
      <div>
        {list?.map((item) => {
          return (
            <div>
              <ul>
                <li key={item.movie}>
                  {item.movie}, {item.director}
                  <button onClick={() => removeHandler(item.movie)}>
                    Remove
                  </button>
                </li>
              </ul>
            </div>
          );
        }) || []}
      </div>
    </div>
  );
}

我尝试使用过滤器过滤出删除的列表，但它删除了整个列表点击删除按钮这里是codesandbox链接https://codesandbox.io/s/relaxed-feather-esbynl?file=/src/App.js:0-1423
第一个列表也是在没有onSubmit的情况下自动生成