從項目數組中刪除一個項目只會刪除最后一個項目

Question

我無法從 React 組件數組中刪除某些元素。 我有一些簡單的應用程序，它只有一個按鈕“添加表單”，當用戶單擊此按鈕時，將添加帶有名字和姓氏輸入的新表單。 如果用戶想要刪除此表單，用戶只需單擊刪除按鈕並從數組中刪除此表單。 但是，問題在於，每當用戶在某個表單上單擊刪除時，最后一個元素都會一直被刪除。 但是，如果您查看控制台，您會看到已刪除的表單已從 state 中刪除，但在 UI 中刪除了最后一個元素。 示例代碼：

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

export default function App() {
  const [forms, setForms] = useState([]);

  const addNewForm = () => {
    setForms([
      ...forms,
      {
        valuesOfForm: { firstname: "", lastname: "" }
      }
    ]);
  };

  const handleChangeForms = (name, value, index) => {
    const values = [...forms];
    values[index].valuesOfForm[name] = value;
    setForms([...values]);
  };

  const handleDeleteForms = (index) => {
    const values = [...forms];
    values.splice(index, 1);
    setForms([...values]);
  };

  return (
    <div className="App">
      <div>
        <button onClick={addNewForm}>Add new form</button>
        {console.log(forms)}
        {forms.map((form, index) => (
          <SomeForm
            value={form.valuesOfForm}
            key={index}
            index={index}
            handleChangeForms={handleChangeForms}
            handleDeleteForms={handleDeleteForms}
          />
        ))}
      </div>
    </div>
  );
}

const SomeForm = (props) => {
  const [value, setValue] = useState(props.value);
  const onFormChange = (event) => {
    props.handleChangeForms(event.target.name, event.target.value, props.index);
    setValue({ ...value, [event.target.name]: event.target.value });
  };

  const onClick = (event) => {
    event.preventDefault();
    props.handleDeleteForms(props.index);
  };

  return (
    <form onChange={onFormChange}>
      <input
        type="text"
        name="firstname"
        placeholder="first name"
        onChange={onFormChange}
        value={value.firstname}
      />
      <input
        type="text"
        name="lastname"
        placeholder="last name"
        value={value.lastname}
      />
      <button onClick={onClick}>Delete form</button>
    </form>
  );
};

沙盒

Answer 1

因為您使用index作為key 。 密鑰將幫助反應知道應該更新哪個。 因此，您需要為每個組件提供唯一值。

僅供參考： https://reactjs.org/docs/lists-and-keys.html

您的示例的快速修復：

let id = 0 // Introduce id variable

export default function App() {

每次添加新項目時增加 Id：

  const addNewForm = () => {
    id++;
    setForms([
      ...forms,
      {
        id,
        valuesOfForm: { firstname: "", lastname: "" }
      }
    ]);
  };

將密鑰更改為 id：

<SomeForm
  value={form.valuesOfForm}
  key={form.id}
  index={index}

在此之后一切都會正常