javascript - 从项目数组中删除一个项目只会删除最后一个项目

Question

我在从 React 组件数组中删除某些元素时遇到问题。我有一些简单的应用程序，只有一个按钮“添加表单”，当用户单击此按钮时，新表单将添加名字和姓氏输入。如果用户想删除这个表单，用户可以点击删除按钮，从数组中删除这个表单。但是，问题是每当用户在某些表单上单击删除时，最后一个元素就会一直被删除。但是如果您查看控制台，您会看到已删除的表单已从状态中删除，但在 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>
  );
};

Sandbox

Answer 1

因为您正在使用 index 作为 key。 key 将帮助 react 知道应该更新哪个。因此，您需要为每个组件提供唯一的值。

仅供引用: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: "" }
      }
    ]);
  };

将 key 更改为id:

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

此后一切正常